DEV Community

Cover image for Subscription App(part 1)
Afolabi Esther
Afolabi Esther

Posted on • Updated on

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

build typescript react app

  • 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

create server directory

  • 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
"npm install express"

  • express,

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

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

  • import express

  • create an express app

  • create a route

  • listen at a particular port

Don't forget to save.


create new script to run

  • 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

Also run the url in the browser


It should display your response.

Image description

We have the server up and running!

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

Top comments (0)