junekimdev / stockinfo-web-us

Web frontend for US stock price analysis

JK Stock Web Frontend

This is the web frontend written in Typescript, React.JS, Next.JS for JK Stock website

Table of Contents

1. Getting Started
2. Tech Stack
3. Directory Structure
4. Code Generation
5. Authors
6. License

---

Getting Started

Prerequisite

Install latest Node.js LTS

# Debian, Ubuntu
sudo apt update
sudo apt install nodejs
nodejs -v

# Windows
choco install nodejs-lts

Installation

Clone the repo and install dependencies

# git clone will create a directory named myAppName
# if the directory is already created, then use .(dot) instead of myAppName
git clone https://github.com/junekimdev/template-react-app.git <myAppName>
cd myAppName
yarn

Make sure to remove .git directory to start afresh

# remove .git directory beforehand
git init
git add .
git commit -m "Initial commit"
git branch -M master
git remote add origin <myGitRepo>
git push -u origin master

Add a file .env that includes environmental variables

example

#NODE_ENV=production
NEXT_PUBLIC_URL=https://app.domain.com
#NEXT_PUBLIC_GTM_ID=
NEXT_PUBLIC_API_URL=http://api.domain.com

Tech Stack

• Markup language (Web Standard): HTML5
• Stylesheet language (Web Standard): CSS3
• Script language: ECMAScript 2015 (a.k.a Javascript ES6)
• Javascript Package Manager: Yarn
• Script preprocessor: Typescript
• Website client-side rendering framework: ReactJS
• Website server-side rendering framework: NextJS
• Package management: Webpack (included in NextJS)
• Transpiler: Speedy Web Compiler (included in NextJS)
• State management (client): Recoil
• State management (server): TanStack Query
• HTTP interface: fetch API (part of WHATWG Web Standard)
• JavaScript Testing Framework: Jest
• React Testing Library: @testing-library/react
• Browser style normalization script: Normalize
• Stylesheet preprocessor: SCSS
• Stylesheet postprocessor: Postcss (included in NextJS)
• Postcss plugin: Autoprefixer (included in NextJS)
• Version control: Git
• Source code repository: GitHub
• Linter: ESLint
• Formatter: Prettier
• Template engine for code generation: EJS

Directory Structure

Root
├── components  
    ├── _theme.scss  
    └── eachComponent  
        ├── index.ts  
        ├── eachComponent.module.scss  
        ├── eachComponentInteractor.tsx  
        ├── eachComponentStates.ts  
        ├── eachComponentPresenter.tsx  
        ├── eachComponentViewName.tsx  
        └── eachComponentType.ts  
├── controllers  
    ├── index.ts  
    ├── apiURLs.ts  
    ├── net  
        └── staticQuery.ts  
    └── moreControllers.ts
├── pages  
    ├── _app.tsx  
    ├── _document.tsx  
    ├── _error.tsx  
    ├── 404.tsx  
    ├── index.ts  
    └── global.scss  
├── public  
    ├── favicon.ico (similar files)  
    ├── robot.txt  
    └── assets  
        └── images  
            └── eachImage.png  
└── templates  
    └── eachCodeGenerationTemplate.ejs

Code Generation

Component Generator

• With a View file

node codegen.js --name=myComponent

• Without a View file

node codegen.js --name=myComponent --V

Authors

• June Kim - Initial work - Github

License

No license is given by the author. All rights are reserved.