code4cake / intro-to-bigger-projects

Intro to Bigger Projects

Brief introduction to bigger projects in react and nodejs

Technologies Used

Check the pkg.json for a complete list. But the most notable ones are:

• react frontend library
• react-dom
• vitejs compiler
• typescript static type checking
• tailwind css
• @emotion/* css in js library
• @mantine/* react component library
• sass css preprocessor

Points discussed on this repo

1. Intro to React

• What is react
• Creating a react app with
  • vite
  • create react app
  • other toolings
• Documentation of @react
  • Props
  • Components
  • State
  • Hooks

2. Different ways to do CSS in the world today (vis a vis React) Pro vs Cons

• Normal css.
• Css modules
• CSS Preprocessors: Sass (Scss) || Less | Stylus || ..etc
• Css-in-JS: (@emotion , @styled-components)
• CSS Frameworks (bootstrap, bulma, etc)
• Css utility classes: @tailwind
• React component Libraries @mui, @mantine, @chakra, @rebass

3. Creating a server and api

Diagram draw.io

• Server
• Connect db
• Create schema
• Create routes
• Interact with the db via the routes - return data from the db back to the client

Develop

1. git clone project
2. yarn install || pnpm install || npm install to install dependencies
3. yarn run dev || pnpm dev || npm dev to start developing

---

© 2023