Skip to content

vatsalsinghkv/remotive-jobs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Remotive Jobs

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

Remotive Jobs

Table of Contents

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

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

Acknowledgements

Releases

No releases published

Packages

No packages published