Devjobs App is Job Ads Listing Applications for Developers. Original project created by frontendmentor.io
Client: Next.js, Sass(/w Flexbox), Framer, React Icons
Todo: MongoDB, Redux?, Firebase?
. ├──common #Application Design Elements & Components for repeatedly use /w Utils ├──components #React Components with parent to child hierarchy ├──data #Mock data TODO:Replace with database ├──store #Redux Toolkit store and App Features ├──styles #SASS files .
Primary Colors | Hex |
---|---|
Violet | |
Light Violet | |
Very Dark Blue | |
Midnight |
Secondary Colors | Hex |
---|---|
White | |
Light Gray | |
Gray | |
Dark Gray |
Also Font: Kumbh Sans
// Page Breakdowns $desktop-max-width: 1440px;
// App Widths $desktop-app-width: 1140px;
Live Demo Link will be added later.
-
Day 1
- Planing
- install Next.js
- Initial Setup
- Sass Folder Setup
- _global.scss /w Fonts, Typography
- _variables.scss /w Colors
- Mock Data.json to Javascript Object
-
Day 2
- Setting up Dark/Light Implementation with next-themes & Sass
- Changed the Sass file structure. I moved all _variables.scss to _themes.scss file structure helps to keep variables with parent theme-mode.
- Components and Common Component file structure.
- Very basic Next api call with mock data provided and call from index.app.
- Setting up Dark/Light Implementation with next-themes & Sass
-
Day 3
- Next/Head seperated another component seo and web app tags will update later.
- Assets SVG component created common/elements/assets/logos
- Header & Search Placement
-
Day 4/5
- Theme Toggle
- APP Icon Components with locale SVGs
- Decided to use Redux for state management
- App Variables
- Jobs
-
Day 6
- Folder Structure
- Search Placement
- Joblist Components
- Redux Toolkit
- Small bugs
Install dependencies
npm install
Start the server
npm run dev