Code Practice: How to create Simple Portfolio with CMS — Full-stack, Next.js, Tailwind CSS, Flowbite, Supabase

Create portfolio with content management system following a single article.

Description

Complete Step-by-step Tutorial

1. Read on Medium

Live demo on Vercel

1. https://simple-portfolio-with-cms-cwntfs.vercel.app

Series:

1. Code Practice on Medium

Stack:

1. Next.js 13
2. Tailwind CSS
3. Flowbite
4. Supabase

Some concepts you’ll see here

1. Next.js App Router
2. Next.js server and client components
3. PostgreSQL database functions, policies, and trigger.
4. Supabase database and storage CRUD.

Notes

1. Components and icons used in this project are from Flowbite.
2. Authentication page navigation buttons are not included in Sidebar.tsx since the auth is only exclusive to owner of the web portfolio. User must manually visit /sign-up and /sign-in page via the address bar.
3. This project also only allows whitelisted emails to sign up and sign in to the app and acquire admin privileges such as adding and editing projects. Check app/auth/sign-in/route.ts and app/auth/sign-up/route.ts.

Preview

Getting Started

Prerequisites

Before you begin, ensure you have the following software installed:

1. GitHub CLI
2. Node.js 16.8 or later.
3. macOS, Windows (including WSL), and Linux are supported.
4. Docker Desktop
5. Prettier VS Code Extension
6. Tailwind Fold (Optional)

Installation

1. Create your GitHub repo using this project as template.

gh repo create <repo-name> --public --template=saikise/simple-portfolio-with-cms-cwntfs

1. Install the dependencies listed in package.json.

npm i

Usage

To run the project, use the following command:

1. Log in to Supabaes CLI

npx supabase login

1. Start Supabase services.

Requires supabase/config.toml to be created in your current working directory by running npx supabase init but Supabase local config is already set up in this repo via npx supabase init so we can directly just start Supabase services with the command below:

npx supabase start

1. Start development server.

npm run dev