Lesson 03: Project Architecture - strvcom/frontend-academy-2022 GitHub Wiki

Speaker: Matej Polak

• Pull Request
• Recording (Gdrive)
• Slides (Google Slides)
• Slides (PDF)

• Removal of pages/api/hello, public/vercel.svg, styles/Home.modules.css, and placeholder code in pages/index
• git commit -m 'refactor: next.js bootstrap cleanup'

• Create src/ and move all the app related files into it
• git commit -m 'refactor: moved app related code into src/ dir'

• Add features/ with following structure

- features/
  - events/
    - pages/
      - CreateEventPage/
        - index.jsx
      - DashboardPage/
        - index.jsx
  - login/
    - pages/
      - LoginPage/
        - index.jsx

• Implement all these pages into Next.js routing (src/pages/)
• git commit -m 'feat: added features dir and implemented navigation'

• Configure ~/* path alias in tsconfig.json
• Update nested imports in src/pages/ to use the new alias
• git commit -m 'refactor: add path aliases'

• Create constants/ to specify Routes enum (to be used in <Header />)
• Create <Header /> and <Layout /> and its flavor <DefaultLayout />
• Use all these in all previously created pages
• git commit -m 'feat: created and implemented Header and Layout components'

• Create theme/ dir with example palette.ts and colors.ts
• Move globals.css from styles to theme
• git commit -m 'feat: added theme dir with example palette and colors'

• create utils/
• create example example.ts with exported getExampleValue: () => number
• git commit -m 'feat: added example utility'

• create hooks/
• create example useExampleValue.ts with exported useExampleValue: () => {exampleValue: number, setExampleValue: (newValue: number) => void}
• git commit -m 'feat: added example hook'

• UI
• Core