First full-stack project with Node, React

Book store

Simple full-stack project using typescript

Demo page

https://book-store-ts.herokuapp.com/

Architecture

Frontend

This is the directory structure for frontend, it is created by create-react-app with --template typescript flag, which helps us to create react project.

client
├── build
├── public
├── src
│   ├── constants.ts
│   ├── index.tsx
│   ├── types.ts
│   └── state
├── package.json
└── tsconfig.json

Backend

backend directory structure is as follows, and the necessary information is contained in each folder.

server
├── build
├── src
│   ├── app.ts
│   ├── index.ts
│   ├── types.ts
│   ├── models
│   ├── routes
│   └── utils
├── tests
├── jest.config.js
├── package.json
└── tsconfig.json

Getting started

Before getting started, you need .env file at server/build/src/ following the .env.template file located in server directory.

Build

bash ./build.sh

After build project, you have to place .env file in right position. Feel free to open a new issue if you’re having any problems.

Test

This test code uses a jest to check the backend server API.

npm run test

Run

bash ./run.sh

Todo List

[x] ~~Craete user sign up page~~
[ ] Create user info page
[ ] Update error message
[ ] Create End-to-End test
[ ] Server Side Rendering

Download Details:

Author: juseongkr

Demo: https://book-store-ts.herokuapp.com/#/

Source Code: https://github.com/juseongkr/book-store

#reactjs #nodejs #react