Subscription App(part 1)
Tags: webdev, javascript, programming, tutorial
Published: 2024-03-15 11:39:29

# 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](https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://m.youtube.com/watch%3Fv%3DWxw1wNwlBbk&ved=2ahUKEwid-qyPnoaFAxVAREEAHeHxBZsQwqsBegQIDRAF&usg=AOvVaw21T1bivwH3EGKJo2pTtfNE) 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

![build typescript react app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxxj491js92wu6pdj1k4.png)


- 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](https://blog.logrocket.com/build-react-typescript-app-vite/) 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

![create server directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zik9vqnk5e83qjsrkr92.png)

- 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.
![Install express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/138gpqxov43x9lkcv55j.png)
"npm install express"
- express, 

![Install types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x3th9xvt81aeopfeezf.png)
"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

![Initialize typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jscrnqq59ne74sk8d90b.png)


## 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
![create src folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa0racfg9pp7x6l0q3q6.png)

- import express
- create an express app
- create a route
- listen at a particular port

Don't forget to save.

### Next...
![create new script to run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11jpdq6wfj0ni02h1r7k.png)

- 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"

![running the script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjcbb52wh0d2lfasykxd.png)

### Also run the url in the browser
"localhost:8080." 

It should display your response.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gefwv2zjzdqub7dyy4sj.png)

We have the server up and running!

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