Useful Tools and Frameworks
ESLint - Pluggable JavaScript linter
Jest 路 馃儚 Delightful JavaScript Testing
React Testing Library 路 Testing Library
Mocha - the fun, simple, flexible JavaScript test framework
TypeScript - JavaScript that scales.
MERN Tech Stacks
Mongo, Express, React/React Router, Node (create-react-app)
Mongo, Express, Next, Node
Mongo, Express, Gatsby, Node
- For small projects use React Hooks
- For small to medium projects use the Context API
- For medium to large projects use Redux or GraphQL
Step 1: Project Setup
- Create a Git Repo for the project
- Create a Kanban Board Project using GitHub Projects, Notion etc...
Design the App (Optional if you have a design already there is no need)
Using a design tool like Adobe XD, Sketch, InVison Studio, Figma etc...
Step 2: Build App
- Decide on the Technical Stack and folder structure (React, Redux, Next, Gatsby, Node.js, MongoDB, GraphQL etc...)
- Decide on the CSS Layout Structure for the front end (CSS Grid , Flexbox, CSS framework (Bootstrap, Bulma, Tailwind etc...))
Use the Peacock Visual Studio Code extension to set the colour theme for the project. (Optional)
CSS: styled components or Sass/Stylus/CSS
Linting: ESLint
TDD/BDD: Jest and React Testing Library (Front-End) Mocha and Chai (Back-End)
Code Formatting: Prettier
TypeScript (Optional if you want to have better error checking for your code)
Linting: ESLint
Type Checking: TypeScript
Step 3: CI/CD
Gitflow Workflow | Atlassian Git Tutorial
- Use Continuous Integration, Continuous Delivery and Continuous Deployment
CI/CD: GIT, GitLab, BitBucket, CircleCI, Travis CI, Jenkins, Heroku, Netlify, Now, Docker