Git Product home page Git Product logo

admissions-hub's Introduction

Galvanize Student Admissions Hub

Galvanize is a company that conducts coding immersive courses and must determine if potential students possess the aptitude required to make it through the curriculum by conducting a live coding interview. This is a Full-Stack Application using the NextJS framework to unite Front and Back-End codebases. Features of this application is to create a hub that interviewers can log into to add/delete/update student data and conduct live coding interviews with them using socket.io. Stats regarding interview pass rate and other items are collected and displayed to the current interviewer account that is logged in.

Tech Stack

NextJSReactJavascriptCSSHTML5

NodeJSExpress.jsPostgresQLDocker

GitNPMVisual Studio CodePuppeteer

DiscordSlackZoom

MCSP-16 Presentation:

[Insert Link Here]

Getting Started

$
$   docker-compose up
$

Open http://localhost:3000 with your browser to see the result.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Navigation

LOGIN PAGE

At the login page you will see a form to enter your email and password. Emails and passwords can be found in the migration file within the database folder. To get started, use email [email protected] and password temp

Imgur

EDIT PROFILE PAGE

Once you login it will bring you to the main dashboard. In the top right corner you will see a drop down that says Welcome.... followed by whatever firstname is associated with your user information(can be found in localstorage in chrome dev tools or look in your migration file) Once you click on that a dropdown will appear click on view profile.

Imgur

  • Click on the galvanize button in the top left corner to bring you back to the dashboard page.
  • Click logout in the dropdown menu to log you out.
  • Edit your fields if you want to change your profile information once you click update account a paragraph tag will pop up underneath the button letting you know that the update was successful.

DASHBOARD

ADD STUDENT

click add student to add a student. once you click on add student a custom modal will appear with form data that needs to be filled out once youve done so submit and the new data will show up on the list of students in the dashboard.

Imgur

EDIT OR DELETE STUDENT

Click on a student from the list and two more buttons will appear for editing and deleting

Imgur

EXPORT STUDENT INFO

Click on the Export student info. Will pop up with a custom modal with two buttons one for download and another for email.

Imgur

  • the email button does not work yet we did not have time to incorporate it.

SELECT A CANDIDATE TO GET STARTED

  • If a student has not conducted a test when you click on there info you will see a button pop up that says launch interview click that to navigate to the testing suite.
  • If a student has already conducted a test then two buttons will pop up, (resume interview, view notes)

Imgur

INTERVIEW PAGE

GRADING STUDENTS

After clicking on the launch interview button it will bring you to the interview page. Here you can grade students based on there performance and how they interviewed. You can add notes as well as give them a star rating based on how well they completed the task. After inputing all of your notes and ratings for each question push the submit button and it will bring you back to the dashboard page.

Imgur

SHARING INTERVIEW ROOM WITH STUDENT

Copy the interview link and send to the prospective student so that you and the student can share a code space. The student will not be able to see the notes or problems.

Imgur

Learn More - Next.js

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Features

  • Enabled secure authentication/authorization for user account login
  • Created profile page with info about each user and ability to modify account settings
  • Major reorganization of code architecture and implemented industry standard practices for extensible, readible code reducing the overall techincal debt of the project
  • Fixed dozens of bugs that caused application to crash, expedited and streamlined data transfer between the database and back-end, cleaned up various CSS styling issues, and updated the ui elements related to statistical tracking to reflect current and any future events
  • Implemented Pupeteer test suite to automate testing of the application

Archived cohort video presentations:

MCSP-13

https://drive.google.com/file/d/19QuyGSSvIyi1YNiG9edoqgczmRQngQzu/view?usp=share_link

MailHog 

Overview

MailHog is an email testing tool for developers:

  • Configure your application to use MailHog for SMTP delivery
  • View messages in the web UI, or retrieve them with the JSON API
  • Optionally release messages to real SMTP servers for delivery
Installation

MacOS

$   brew update && brew install mailhog

Then, start MailHog by running

$   mailhog 

in the command line.

Nodemailer
  • is a module for Node.js applications to allow easy email sending.
Getting Started
  1. Install mailhog
  2. Run mailhog by typing $ mailhog in CLI
  3. Go to http://0.0.0.0:8025/ , you should see Web UI

Mailhog

  1. Run express server by going to express directory and running node Express.mjs in CLI
  2. Go to login page
  3. Click on Forgot button
  4. Write your email
  5. Press submit
  6. You should see an email on mailhog UI

Mailhog

Puppeteer

Puppeteer is a Node.js library that provides a high-level API for controlling headless Chrome or Chromium over the DevTools Protocol.

It allows you to automate tasks that would otherwise be time-consuming and repetitive, such as:

  • Generating screenshots and PDFs of pages

  • Crawlin websites to extract data

  • Automating form submissions and UI testing

We have incorporated several tests utilizing Puppeteer see the wiki for more information: https://github.com/gschool-blue-ocean/admissions-hub/wiki

To-Do / Future Features

  • we wanted to finish the testing of every feature to make sure the application doesnt't contain any bugs.
  • as well as incorporationg jest with puppeteer.
  • Add the email csv functionality to the csv file for exporting student info
  • Refactor the code for forgot password on the login page. Note* CURRENTLY IT WORKS BUT ONLY SENDS THE EMAIL TO MAILHOG.
  • Link to third party services under account update

Advice for the future group

When we took over this project we almost deconstructed the file format. Our knee jerk reaction was to reformat the file structure based on how wierd it looked. Note: This file structure in ADMISSIONS HUB is formatted to work specifically with NEXT.JS framework. Please do your research on how NEXT.JS works before considering any refactoring of the code base.

admissions-hub's People

Contributors

thejaguyer avatar lowlyphe avatar reaveskev avatar ghribik avatar fcastro958 avatar gglws avatar alexthehomebody avatar balimbekov avatar aaonrybicki avatar rmkluis avatar segerlu avatar jnich52 avatar daecho8 avatar echarles253 avatar mrust1219 avatar rmbar19 avatar xzuras avatar deee3 avatar danny-andrews 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.