Giter Site home page Giter Site logo

karolinacodes / junior Goto Github PK

View Code? Open in Web Editor NEW
5.0 1.0 2.0 222.89 MB

A full-stack application for junior developers to find jobs that match their skill-level, find gigs in order to boost their resume, and showcase a portfolio.

Shell 0.05% JavaScript 88.56% HTML 0.70% CSS 0.04% SCSS 10.66%
reactjs material-ui express-router postgresql sass nodejs twilio

junior's Introduction

Junior

Description

Junior Developers: Junior is a full-stack web application that was created to facilitate junior developers in finding jobs that match their skill-level, boosting their resume through finding and completing gigs, and providing a way to easily showcase a portfolio.

Employers: Junior also facilitates employers in finding junior developers to fill their roles by allowing employers to post jobs and gigs to the job board, manage their postings and applications, and accept or decline applicants.

Entity Relationship Diagram

Junior

Design

Whireframes

https://whimsical.com/junior-AvKXEBvKzgYM9r3wUTuaDF

Mock-up

Mock-up was created using Figma.

Demo

Home Page

Landing-page

When a user visits the site, they can choose to login to their personal account or freely search for jobs and gigs relevant to junior developers.

Junior Developers

Login & Profile/Portfolio

Profile-page

Junior developers with a user account can log in from the landing page. After successful login, they are re-directed to their profile page which also serves as their portfolio. Here they can view their personal details and links, and the projects they have added to their portfolio. Projects can be viewed in more detail in a modal by clicking on them. There is also a link to the project's github repository and if provided, there is a live link to the deployed project.


Job & Gig Advanced Search

Search-page

Junior developers can search for jobs and gigs by clicking "Find Work" in the navigation bar or in the user drop-down menu. On the job search page, junior dev's can browse through the active job and gig listings. The junior dev can filter the results in the search bar based on whether they are searching for gigs or jobs.

If the junior dev is searching for a job, they can further narrow their search by providing a keyword, job title, or city, filtering by schedule or languages, or filtering by changing the salary range on the dynamic slider.

If a junior dev is searching for gig postings, they can narrow their search by providing keywords and job titles, and filtering by languages.


Viewing Job & Gig Postings

Job-Gig-View

If a junior dev views a job or gig posting they are interested in, they can click on "Learn more" to view more information about the posting. Below the job or gig description, junior dev's can choose to apply for the posting or save the posting to apply for at a later time.


Saving Job & Gig Postings

Save-postings

If a junior dev would like to save a posting to potentially apply for at a later date, they can click on the "Save" button. The junior dev can then view the saved posting on their profile by clicking on the dynamically changed "Saved" button. If the junior dev would like to continue searching for more positions they can return to the job posting by clicking on the dynamically rendered button.


Applying for Jobs & Gigs

Applying

If a junior dev would like to apply for a gig or job, they can click the "Apply" button below the job description. This prompts a modal to appear where they can see a pre-filled application containing their personal details and links that will be sent to the employer. When the junior dev clicks "Submit Application", their application is sent to the employer and the employer receieves an email notifying them of the application submission. The junior dev can view their application by clicking "View application" which will redirect them to their profile where they can see all of their submitted applications displayed.


Editing Your Info

Edit-info

If during the application process or at any other point, the junior dev would like to edit their profile information, they can do so on their profile page.


Adding New Projects

Add-project

Junior dev's can add new projects to their portfolio on their profile page. The junior dev will have to provide the project name, the photo url (which will dynamically display the photo below the project title), a github link, a live link, the project description and the original request for the project. After the form is filled, the junior dev can post the project and it will be added to their portfolio.


Employers

Profile

Employer-profile

Employers with a user account can log in from the landing page. After successful login, they are re-directed to their profile page where they can view their job postings and/or gig postings.


Accept or Decline Applicant

Accept-applicant

Employers can also view all the application submission for each respective posting from the profile page. They can publicly view the junior dev's profile and see their porfolio. If they make a decision about the junior dev's application, they can accept or decline them for position.


Adding a New Gig or Job

Add-posting

Employers can also add a new job or gig posting. They will need to fill in the form fields with the relevant information for the posting.


Technology Stack

Back-end

  • PostgresSQL
  • Express.js
  • Node.js

Front-end

  • React.js
  • React-router
  • SASS
  • Material-UI
  • Twilio

Dependencies

Back end

sendgrid/mail: ^7.6.0,
cookie-parser: ^1.4.6,
debug: ~2.6.9,
express: ~4.16.1,
morgan: ~1.9.1,
pg: ^8.7.1,
pg-native: ^3.0.0

Front end

date-io/date-fns: ^1.3.13,
emotion/core: ^11.0.0,
emotion/react: ^11.7.1,
emotion/styled: ^11.6.0,
mui/icons-material: ^5.2.5,
mui/lab: *,
mui/material: ^5.2.8,
mui/styles: ^5.3.0,
testing-library/jest-dom: ^5.16.1,
testing-library/react: ^12.1.2,
testing-library/user-event: ^13.5.0,
axios: ^0.24.0,
javascript-time-ago: ^2.3.10,
node-sass: ^7.0.1,
react: ^17.0.2,
react-dom: ^17.0.2,
react-icons: ^4.3.1,
react-router-dom: ^6.2.1,
react-scripts: 5.0.0,
react-time-ago: ^7.1.7,
react-timeago: ^6.2.1,
web-vitals: ^2.1.2

Setup:

  1. Clone the repository. In the terminal:
git clone [email protected]:karolinaCodes/junior.git
  1. Install back-end dependencies, seed the database and start back-end server:
cd /backend
npm install
npm run db:reset
npm start
  1. Install front-end dependencies and start the web server:
cd /frontend
npm install
npm start

The front-end will be served at http://localhost:3000/ .

Contributors

junior's People

Contributors

alex-reyne avatar karolinacodes avatar sarahdeecee avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.