This individual project involves developing a web page for SoundWave, replicating the provided prototype with certain technical requirements:
- Developed in React with TypeScript.
- Should be responsive for mobile (375px) and laptop.
- Styles should be applied using CSS modules and the Semantic UI framework.
- Implementing navbar routes with react-router-dom.
- Applying Atomic Design principles.
- The use of Hooks (state) and Props (properties) is optional.
- 🎨 Style guide: Click here
- 🖼️ Mockup: Click here
- 💡 Semantic UI: Click here
- Requirements Analysis
- Mockup Analysis and Component Identification
- Visual Design Analysis
- Setup: Installing React, React Router, TypeScript, Semantic UI
- File Organization: Structuring the project based on components and Atomic Design principles
- Creating Files: Using the shortcut command "rfc" to generate files
- Creating Routes: Setting up routes in the App.tsx file
- Development: Starting development for each created file, beginning with atoms and their respective CSS (mobile-first approach) and ending with pages.
important commands:
- $ node -v
- $ npm -v
- $ npm create vite@latest project-name -> (y) -> React -> Typescript
- $ cd project-name
- $ npm install react-router-dom
- $ npm install semantic-ui-react semantic-ui-css
- $ npm run dev -> localhost:5173
- $ npm run build
Take a look: Click here
