Remotive Jobs

A job board based on remotive.com built with Next.js and hosted with Vercel.

Table of Contents

• Overview
  • User Stories
  • Features
  • How to use
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Contact
• Acknowledgements

Overview

User Stories

Users should be able to:

• User can see a list of jobs in a city by default
• User can search for jobs with a given keyword
• User can search for a full-time job only
• User can see a list of jobs with their logo, company name, location, and posted time.
• When user select a job, user can see job descriptions and how to apply like the given design.
• When user is on the job details page, user can go back to the search page
• User can see jobs on different pages, 5 items on each page

Features

• App displays list of jobs
• App displays list of jobs according to the category specified
• App displays list of jobs according to the location specified
• App shows the jobs searched by the user

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with yarn installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/vatsalsinghkv/remotive-jobs

# Install dependencies
$ yarn

# Run the app
$ yarn dev

My process

Built With

• Next.js - Fullstack Framework
• Sass - CSS pre-processor
• Axios - For HTTP requests
• nextjs-progressbar - A progress bar (loader), while switching switching pages
• react-html-parser - A utility for converting HTML strings into React components

What I learned

I've learned lot of things in this challenge:

• How to use Redux toolkit for state management in nextjs

// store/index.js
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { createWrapper, HYDRATE } from 'next-redux-wrapper';
import pagination from './pagination';
import jobs from './jobs';

const combinedReducer = combineReducers({
  pagination,
  jobs,
});

const masterReducer = (state, action) => {
  if (action.type === HYDRATE) {
    return {
      ...state,
      ...action.payload,
    };
  } else {
    return combinedReducer(state, action);
  }
};

const makeStore = () => {
  return configureStore({
    reducer: masterReducer,
  });
};

const wrapper = createWrapper(makeStore);
export { makeStore, wrapper };

// pages/index.js
import { wrapper } from '../store';

export const getStaticProps = wrapper.getStaticProps((store) => async () => {
  const jobs = await getAllJobs();
  store.dispatch(setJobs(jobs));

  const categories = await getJobsCategories();
  store.dispatch(setCategories(categories));

  const locations = await getLocations();
  store.dispatch(setLocations(locations));

  store.dispatch(setSelectedCategory('all'));

  return {
    props: { jobs },
  };
});

• How to use getStaticPaths

// pages/category/[category].js
export const getStaticPaths = async () => {
  const categories = await getJobsCategories();
  return {
    paths: categories.map((category) => ({ params: { category } })),
    fallback: false,
  };
};

Continued development

Technologies I'd be learning soon:

• Typescript
• Data Structures and Algorithms
• Material UI
• Backend Development
• Blockchain Development
• Testing (JS)
• Flutter & Dart
• Cyber Security

Useful resources

• MDN Docs - This is an amazing reference which helped me finally understand detailed concepts like data- attr, aria attr, input range etc.
• Nextjs Docs - Best reference to get start with Nextjs
• Illustrations - Best illustrations for errors and warnings etc.
• Logo/Icons - Flat Icons best place for free icons

Contact

• Website - vatsalsinghkv.vercel.app
• Github - @vatsalsinghkv
• LinkedIn - @vatsalsinghkv
• Twitter - @vatsalsinghkv
• Instagram - @vatsalsinghkv
• Facebook - @vatsalsinghkv
• devChallenges - @vatsalsinghkv
• Frontend Mentor - @vatsalsinghkv

Acknowledgements

• Illustrations by Storyset
• Favicon