Subscription App(part 1)

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.

So let's run the script (server)...

"npm run start:dev"

Also run the url in the browser

"localhost:8080."

It should display your response.

We have the server up and running!

In the next post, I'll be working on the auth(sign-up route)