Skip to content

Latest commit

 

History

History
150 lines (87 loc) · 8.68 KB

README.md

File metadata and controls

150 lines (87 loc) · 8.68 KB
Raw

HackGT Tech Onboarding

Welcome to the HackGT tech onboarding project. This will serve as an optional part of your application as well as an introduction to TypeScript/JavaScript, Node.js, MongoDB, and React.

This README has the following sections:

Please follow the installation instructions in order, since later tools may depend on installing previous tools first.

Installation

Homebrew

If you're on macOS or Linux, you should first install Homebrew. It's essentially a package manager for your computer (you'll need it to install tools like MongoDB).

Here are the installation instructions. Test that its installed by typing in brew --version

Node.js and npm

You can download Node.js here. Select the button saying "Recommended For Most Users".

npm stands for Node Package Manager, though it's name is confusing since it can also be used on the frontend. npm is automatically distributed with Node.js.

To check that you have Node and npm installed, run these commands in your terminal.

  • node -v
  • npm -v

If these commands return a number like v14.21.0 you're good to go.

yarn

To install Yarn, go here. After installing, test that it's installed by running yarn --version.

MongoDB

Here are the installation instructions for MongoDB Community Edition. Check that it's installed by running mongo --version.

MongoDB Compass

MongoDB Compass is a GUI for your MongoDB database that allows you to easily interact with it and view data. Download it here

Postgres

PostgreSQL is a structured database that we use in some of our projects. To install Postgres, use the command brew install postgresql@14 if on Mac or follow the instructions here. Check that it's installed by running psql --version.

After it's installed, run brew services start postgresql@14 to start postgres. You can verify that Postgres is running in Postico by testing your connection to localhost:5432

Postico

Postico is a GUI for your Postgres database that allows you to view/edit data similar to MongoDB Compass. Download it here (Note, it's only available for Mac). On windows, you can use pgAdmin.

VSCode

The easiest code editor to get started with is VSCode. Please don't use Sublime :). You can download it here.

Some VSCode extensions that are extremely useful:

  • Github Copilot (free with .edu email)
  • Prettier

Postman

Postman is an app that allows you to test your backend code by sending different types of requests. You can download it here.

Postman will be your best friend when working with APIs, so it's important to get familiar with it. Refer to this for guidance on how to use Postman with our APIs.

Learning Links

On most coding projects, you'll likely be using a wide number of tools, frameworks, and languages, and you'll constantly be learning new ones as projects rise and fall in popularity. As such, here are some cool resources to help you learn the tools we use at HackGT.

JavaScript and TypeScript

React

Node.js and Express.js

MongoDB and Mongoose

Postgres and Postico

Setup

Git

Before developing this onboarding project, fork the repositiory and clone the forked repository to your local device. Then you should be able to work on the project from there. As you develop, push your changes to your forked branch. Once you're done with the project, create a pull request with your name followed by "Onboarding Project" such as Ganning Xu Onboarding Project.

If you are still confused about this process, use this link as a resource: Contributing to projects

Important Please do not push any commits on the main branch, only push commits on your specific branch!

Getting Started

  1. yarn install (Install dependencies from package manager)
  2. yarn start (Start frontend client)

Navigate to localhost:3000 to see the frontend client for the project.

Development Guide

Hexlabs Development Resources

Step 1

Take a look around the repo! Specifically, look at App.tsx. You don't have to know exactly how everything works, but just try to see how we handle authentication and our api interactions setup.

Step 2

Take a look at the src/components folder. Be sure to read through all the comments in all the files to get a better understanding of what's going on in the codebase. You'll be making changes to these files to complete the project. A great resource to use when working on any frontend project is our frontend docs. In addition, take a look at the USERS service in the api repo to familiarize yourself with the routes and our other frontend projects like registration that makes API calls similar to what you will be implementing in Step 3.

Step 3

Now that you have a better understanding of the codebase, it's time to start working on the project! The goal of this project is to create a simple Hexlabs profile viewer. Each of these tasks should be linked with a corresponding comment starting with TODO in the codebase.

  • UserData.tsx Configure the api call to get the user data from the backend api
  • UserData.tsx Use the existing api call but add in a filter for only people whose phone number starts with 470
  • UserData.tsx Add a button that allows you to sort the users by their first name
  • UserCard.tsx Create a modal that shows the user's full name, email, and phone number when you click on the user card
  • UserCard.tsx Create a modal that retrieves all of the hexathons that a user has an application for.
  • App.tsx Add the Header and Footer frontend components from our hexlabs-core package.

Side note: Use the chakra-ui package for frontend components you'd like to use, like buttons for instance - we use Chakra UI extensively on the frontend.

Note that the last two tasks are a bit more difficult than the others! Feel free to put your own creative spin on the project. If you have any ideas for cool features, feel free to implement them! We love to see new ideas on tech team and we want to see how you think!