Portfolio-Nuxt

Nuxt and Supabase based portfolio website
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. License
5. Contact
6. Acknowledgments

About The Project

Projects main goal it to try out a combination of Nuxt and Supabase and the features they both offer.

The Admin Dashboard is built with SSR and CRUD operations are done on the server side.
The landing pages / accessible parts on the other hand are utilizing Incremental Static Regeneration (ISR),
which means that the data is fetched at build time and then served from the cache.

(back to top)

Built With

• 
• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

Prerequisites

• Node.js

• Docker Desktop

• yarn

  npm install yarn -g

Installation

1. Clone the repository

   git clone https://github.com/Nagell/portfolio-nuxt.git

2. Install packages

   yarn install

3. Start Docker Desktop (Official docs)

   • For Windows: set on in the settings Expose deamon on tcp://localhost:2375 without TLS
   • For Mac: set on in the settings Use Virtualization Framework

4. Download Supabase container

   yarn supabase start

   If supabase is not recognized you can force it by reinstalling the package

    yarn install supabase -D

5. Copy .env.example to .env
   and fill in the Supabase credentials visible in the console when the container starts.

   SUPABASE_KEY=<YOUR_LOCAL_SUPABASE_KEY> #"anon key" from the console
   # the rest can initially stay as it is

6. Start the development server

   yarn run dev

7. Open http://localhost:3000 to view it in the browser.

8. Change git remote url to avoid accidental pushes to base project

   git remote set-url origin github_username/repo_name
   git remote -v # confirm the changes

To obtain the admin dashboard access, you need to create a new OAuth application on Github.
More on this topic can be found in the development docs.

(back to top)

Roadmap

• Add Supabase integration
• Add Tailwind CSS integration
• Add admin panel with authentication
• Add server-side CRUD operations for projects
• Add server-side CRUD operations for images
• Add image optimization
• Deploy to Vercel
• Add CI/CD
• Prepare dev and prod environments
• Create and implement a design for:
  • landing page
  • login page
  • admin panel
• Add animations
• Connect final domain to the main branch
• Add license
• Add meta tags
• Improve a11y - link
• Add Legal Notice and Privacy Policy
• Add Vitest and tests
• Add i18n

(back to top)

License

Distributed under the CC BY-NC 4.0 License. See LICENSE for more information.

(back to top)

Contact

Dawid Nitka - Linkedin

Project Link: https://github.com/Nagell/portfolio-nuxt

(back to top)

Acknowledgments

• Nuxt Supabase
• Nuxt Image
• Best-README-Template

(back to top)