Skip to content

4. Code Overview

Jump to bottom
Deathlive edited this page Oct 27, 2019 · 1 revision

The application consists of two parts FE and BE.
The source code is in the src/ folder. Frontend and Backend are divided into two folders src/client and src/server.

Frontend

This application used fractal folder structures.

  • index.tsx - The entry point to our application. The file defines out Routes and Main component.
  • assets/ - This folder contains the images and css styles.
  • components/ - This folder contains the separates components.
  • index/ - This folder contains the main page for app.
  • pages/ - This folder contains all the main pages for the application.
  • utils/ - This folder contains configuration for Axios, SocketIO, Redux and API.

Entrypoint
File: index.tsx Imports: store.ts, /pages/Routes.tsx Renders routes pointing to their associated components:

  <Switch>
    <Route exact path="/" render={() => (
      isAuth ? <Content /> : <Redirect to="/login" />
    )} />
      <Route exact path={["/login", "/register", "/register/verify"]} render={() => (
        isAuth ? <Redirect to="/" /> : <Auth />
      )} />
      <Route exact path="/profile/:id" component={Profile} />
    <Route component={NotFound} />
  </Switch>

API request example
File: utils/api/ API requests examples:

import axios from "../axios";
export default {
  login: (postData: any) => axios.post("/user/login", postData),
  socialLogin: (postData: any) => axios.post("/user/socialLogin", postData),
  register: (postData: any) => axios.post("/user/register", postData),
};

Redux

File: state/store.ts Imports: Used redux-starter-kit configureStore and import root reducers.

Also used Actions and Reducers, in the Constant folder written all action constants. Most mapStateToProps won't be mentionned, as there are fairly simple. Take some objects, use them in render. mapDispatchToProps will be referred to as "handlers". Some will emerge as common ones. Dispatching some specific handlers on some specific lifecylce methods will also emerge as a pattern.

Components

The main component in applications is a Route.tsx that selects what to display the Main page(Content.tsx) or Login page(Auth.tsx).
If user isAuth open Main Content Page, if not go to Login or Register.

The remaining components that are not connected to the Main page, and can be used several times, are located in the client/components/* folder.

Other Components
Should be self explanatory, follow patterns described above.

Backend

  • server.ts - The entry point to our application. This file defines our express server and connects it to MongoDB using mongoose. It also requires the routes and models we'll be using in the application.
  • controllers/ - The folder contains the main functions that respond to requests for API.
  • core/ - This folder contains the configuration for major dependencies such as Cloudinary, SockerIO, Multer. Also contains the main variables and the application routing file.
  • models/ - This folder contains the schema definitions for our Mongoose models.
  • utils/ - The folder contains other configurations, were needed out app.

Authentication
Requests are authenticated using the Authorization header with a valid JWT. We define one express middlewares in utils/checkAuth.ts that can be used to authenticate requests. The required middleware configures the express-jwt middleware using our application's secret and will return a 401 status code if the request cannot be authenticated. The payload of the JWT can then be accessed from req.headers.token in the endpoint.

Clone this wiki locally