Devjobs App Frontendmentor Challanges

Devjobs App is Job Ads Listing Applications for Developers. Original project created by frontendmentor.io

Tech Stack

Client: Next.js, Sass(/w Flexbox), Framer, React Icons

Todo: MongoDB, Redux?, Firebase?

Folder Structure Explanation

. ├──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 .

Color Reference

Primary Colors	Hex
Violet	#5964E0
Light Violet	#939BF4
Very Dark Blue	#19202D
Midnight	#121721

Secondary Colors	Hex
White	#FFFFFF
Light Gray	#F4F6F8
Gray	#9DAEC2
Dark Gray	#6E8098

Also Font: Kumbh Sans

Breakdowns

// Page Breakdowns $desktop-max-width: 1440px;

// App Widths $desktop-app-width: 1140px;

Demo/Live

Live Demo Link will be added later.

Roadmap

• 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.

• 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

Run Locally

Install dependencies

  npm install

Start the server

  npm run dev