What exactly am I building?

A full-stack MERN application.

It's a subscription app for a hair product where a user can subscribe on a monthly basis to get access to specific hair products and resources based on the plan choosen.

It will consist of:

a landing page (hero page)
sign-up, login & logout features
payment session (using Stripe)

So,I'm using Laith Harb video as my base tutorial(Laith is a superb tutor...check his videos out) which helps me understand the core logics/functionalities. Also I'll be going through some backend codes on GitHub to see how I can improve the app later on.

🔴Alert! It's a Typescript project so brace up for errors😅.

Let's get started.

1.Setting up the project

Create a directory for the project named subscription_app.
Open up the CMD prompt and move into the directory.
Execute a command to create a react app using Vite. Clara gave a thorough explanation here.

Once react app is created, right-click on the project directory and open with vscode.

I'll be working on the API first(the main focus of this documentation). The frontend won't be hard to implement since I already know how to work with React.

2. Building the API

In the root of the project directory, create a server directory
Open the terminal window and move into the server folder, "cd server."
initialize a node application with " npm init -y"

3.Install some dependencies.

"npm install express"

express,

"npm install @types/express @types/node typescript ts-node-dev --save-dev"

types for express & node
typescript, and
ts-node-dev (this package allows us to run typescript application inside of development),

" npm install nodemon -g"

install nodemon globally (it hot reloads our application)
run this command "tsc -init" to initialize that it's a typescript project

3. Getting the app running

Create a src directory ( where our code will live)
Then, create an index.ts file ( this will be the root of our express app)
in the index.ts file
import express
create an express app
create a route
listen at a particular port

Don't forget to save.

Next...

in the package.json
create a new script "start:dev": "nodemon --watch './*/.ts' --exec ts-node src/index.ts"
this call nodemon to watch for changes in "any typescript file that's in any directory that has the extension .ts". If there's any changes nodemon should execute ts-node and rerun the root application.