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.
[Insert Link Here]
$
$ 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.
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
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.
- 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.
EDIT OR DELETE STUDENT
Click on a student from the list and two more buttons will appear for editing and deleting
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.
- 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)
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.
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.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Free Tutorial Project for Next.js - basic project tutorial to get you familiar with Next.js
- The Ultimate NEXT.JS 13 Tutorial (Complete Walkthrough w/ Examples) - by Sonny Sangha
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
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.
- 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
https://drive.google.com/file/d/19QuyGSSvIyi1YNiG9edoqgczmRQngQzu/view?usp=share_link
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
MacOS
$ brew update && brew install mailhog
Then, start MailHog by running
$ mailhog
in the command line.
- is a module for Node.js applications to allow easy email sending.
- Install mailhog
- Run mailhog by typing $ mailhog in CLI
- Go to http://0.0.0.0:8025/ , you should see Web UI
- Run express server by going to express directory and running node Express.mjs in CLI
- Go to login page
- Click on Forgot button
- Write your email
- Press submit
- You should see an email on mailhog UI
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
- 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
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.