Ride On: A simple webstore created with Next.js

This is a simple bike webstore created with Next.js as part of the UpLeveled bootcamp. It sells used road bikes that have been checked by experts beforehand. The webstore was deployed on fly.io, as you can see in the provided link.

Tech Stack

Next.js
PostgreSQL
Playwright
SCSS

Languages:

JavaScript
JSX
TypeScript
TSX

Screenshots

Setup instructions!

Clone the project on your local machine (run each line individually):

git clone <url>
cd <repo name>
yarn

Connect to default database as admin:

On Windows

psql -U postgres

On macOS

psql postgres

On Linux

sudo -u postgres psql

Set up the database:

CREATE DATABASE <database name>;
CREATE USER <user name> WITH ENCRYPTED PASSWORD <user password>;
GRANT ALL PRIVILEGES ON DATABASE <database name> TO <user name>;

After queries are successfully ran, quit psql and connect to the database

\q

On Windows & macOS

psql -U <user name> <database name>

On Linux

sudo -u <user name> psql -U <user name> <database name>

In the repository's directory, run migrations using ley:

yarn migrate up

Create a .env file:

Open the project in your code editor
Copy the content of the .env.example file into the .env file
Replace xxxxxxxx with the access information
add .env file to .gitignore

(Optional) Start deployment server:

yarn dev

Open http://localhost:3000 in your browser to see the result.

Deployment instructions

Sign up on Fly.io: https://fly.io/
On the Fly.io Tokens page, generate a new Fly.io access token named GitHub Actions Deploy Token and copy it from the text box that appears - it will only be shown once
In your GitHub repo under Settings -> Secrets -> Actions, click the New repository secret button at the top right of the page and create a new token with the name FLY_API_TOKEN and the token you copied as the secret
On the command line, open Fly.io login page in your browser using the following command:

flyctl auth login

Enter your credentials in the browser window that appears and then click on the link Try Fly.io for free. Switch back to the terminal - it should now show a message like successfully logged in as <your email>.

Create an app, specifying the name using only lowercase letters and dashes:

flyctl apps create --name <app name>

Create the Fly.io config files as demonstrated in the lecture (also available in the Next.js example repo)
Change your database/connect.ts as in the lecture: only run config() from dotenv-safe if the FLY_IO environment variable is not set
Change your next.config.js as in the lecture: disable linting and type checking on build, since we do this earlier in the GitHub Actions deploy process
Add database credentials using Fly.io secrets, randomy generating the database name, username and password:

flyctl secrets set PGHOST=localhost PGDATABASE=upleveled$(openssl rand -hex 16) PGUSERNAME=upleveled$(openssl rand -hex 16) PGPASSWORD=$(openssl rand -base64 32)

If your app needs any additional environment variables such as API keys, also add them to the secrets using the following pattern:

flyctl secrets set <secret name>=<secret value>

The Next.js documentation mentions exposing variables to the browser using variables prefixed with NEXTPUBLIC. Instead of using environment variables for this, we recommend declaring a JavaSrcipt variable in your code because this information is not secret - it will be exposed to the browser. If you absolutely need to set a NEXT_PUBLIC environment variable, you can add it to your .env.production file.
Create a 1GB volume for the PostgreSQL database in the Amsterdam region:

flyctl volumes create postgres --size 1 --region ams

Deploy the first version of the app:

flyctl deploy

You may receive a faied to fecth an image or build from source error during deployment:

Error failed to fetch an image or build from source: error building: executor failed running [/bin/sh -c yarn build]: exit code: 1