Multi Open API

This repository consists of the source code for the Multi Open API. It is a Next.js project bootstrapped with create-next-app.

Multi Open API

Getting Started

First, install the dependencies and run the development server(s):

# To install dependencies
npm install

# To start the NextJS development server with hot reload
npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/pages/index.js. The page auto-updates as you edit the file.

The src/pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Environment Setup

Node.js - v14.16.0
NPM - v7.7.6. Install with NodeJs
git

IDE Setup

Usage of Visual Studio Code as an IDE is highly recommended. Please ensure that the following VS Code extensions are installed:

ESLint - For linting
Prettier - For formatting
Jest - Unit Testing
npm - Validating NPM package.json

Directory Structure

.
|-- .next
|-- coverage
|-- node_modules
|-- public
|-- src
    |-- components
    |-- hooks
    |-- layouts
    |-- page-components
    |-- pages
    |-- styles
|-- .babelrc
|-- .eslintrc
|-- .gitignore
|-- .prettierrc
|-- jest.config.js
|-- next-env.d.ts
|-- next.config.js
|-- package-lock.json
|-- README.md
|-- tsconfig.json

.next: This directory contains all the build files from npm run build. This is .gitignore-ed and will be generated before building the docker image.
coverage: This directory contains the files generated when jest's coverage flag is enabled (it uses clover under the hood). This is not checked in.
node_modules: What more can we say? This is also not checked in.
public: This directory contains the static assets used for the frontend app, e.g. fonts, images, favicon.ico. Note that if you are trying to upload a huge static asset like a video, use an external data store like S3. We don't want to bloat up the git repo.
src/components: All React components go in here. They are the building blocks of all pages and layouts.
src/hooks: Directory that contains all shared hooks. Currently not used yet. Read more about React hooks here
src/layouts: Directory that contains all layouts (made up of components) for the whole frontend app.
src/page-components: Directory that contains all the various pages of the frontend app. This is used to make it flexible for developers to add page-specific functions/tests beside the page code itself without conflicting with NextJS.
src/styles: All global stylesheets and antd less variable overrides come in here.
.babelrc: Babel config
.eslintrc: ESLint config. Please have ESLint installed in your IDE.
gitignore: Self explanatory
prettierrc: Prettier config. Please have Prettier installed in your IDE.
jest.config.js: Jest config.
next-env.d.ts: Environment file for NextJS application
next.config.js: NextJS Config file. More info here
package-lock.json: Lockfile used by npm to prevent library installation conflicts. This needs to be checked in to git.
package.json: NPM package library definition.
README.md: This.
tsconfig.json: Typescript config file for this project.

Design System

The design system used is Ant Design.

Contributing

Coming soon...

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

johnervan/multiopenapi