SemarangGo Public Information Platform

Repository for Public Information Platform: SemarangGo.

Docs

• Codebase
  • Technologies
  • Folder Structure
• Setup
  • Installation
  • Run Test
  • Production Version
  • Run Production Level Locally
• Handbook

Codebase

Technologies

Here is a list of all the core technologies this project use:

• yarn -- Package manager
• TypeScript
• React -- JavaScript library for building user interfaces
• react-router-dom
• SWR
• axios
• Next.js

Folder structure

src/
├── assets      # Uncompiled assets such as images, or fonts
├── atoms       # State management with Recoil
├── components  # all the reusable components used in application
├── containers  # stateful components that connect to the global state or external APIs
├── models      # Typescript model
├── pages       # Application views and routes
├── services    # implementation of external APIs and other business logic
├── styles      # styling variables
├── utils       # utility functions used throughout the application
└── variable    # Variable which use globally

Index routes

• src/pages/index.tsx -> /
• src/pages/posts/index.tsx -> /posts

Nested routes

• src/pages/posts/topic.tsx -> /posts/topic
• src/pages/settings/profile.tsx -> /settings/profile

Dynamic routes

• src/pages/posts/[slug].tsx -> /posts/:slug
• src/pages/[user]/settings.tsx -> /:user/settings
• src/pages/posts/[...all].tsx -> /posts/*

Setup

Installation

Install the dependencies:

yarn install

Run dev server:

yarn dev

You can run type-checking in watch mode in another terminal, if you may:

yarn type-check --watch

Run tests

yarn test

Production version

To generate the production version, you can run:

yarn build

All files you have to deploy will be located at the dist directory.

Run production version locally

To check if everything will be ok in production before the deployment, you can run this command after yarn build:

yarn preview

Handbooks

• Javscript
• JavaScript Style Guide
• React Hooks cheat sheet
• Learn CSS
• Learn HTML
• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.