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.
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
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 -vnpm -v
If these commands return a number like v14.21.0 you're good to go.
To install Yarn, go here. After installing, test that it's installed by running yarn --version.
Here are the installation instructions for MongoDB Community Edition. Check that it's installed by running mongo --version.
MongoDB Compass is a GUI for your MongoDB database that allows you to easily interact with it and view data. Download it here
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 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.
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 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.
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.
- Modern JavaScript Tutorial https://javascript.info/
- JavaScript tutorial https://www.tutorialrepublic.com/javascript-tutorial/
- TypeScript for new programmers https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
- Amazing slides made my Tim Aveni, HackGT alum https://tja.io/hackgt5/slides/
- A great getting started guide with React https://www.taniarascia.com/getting-started-with-react/
- Honestly, the official React docs are great themselves https://reactjs.org/docs/hello-world.html
- Node.js/Express overview https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction
- In depth Node.js https://nodejs.dev/learn
- Official Express getting started https://expressjs.com/en/starter/hello-world.html
- MongoDB tutorial https://www.freecodecamp.org/news/learn-mongodb-a4ce205e7739/
- Mongoose introduction https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/
- Postgres CLI commands and tutorial https://www.postgresql.org/docs/14/tutorial-start.html
- Postgres Connection Strings StackOverflow Link
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!
yarn install(Install dependencies from package manager)yarn start(Start frontend client)
Navigate to localhost:3000 to see the frontend client for the project.
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.
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.
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.tsxConfigure the api call to get the user data from the backend api -
UserData.tsxUse the existing api call but add in a filter for only people whose phone number starts with 470 -
UserData.tsxAdd a button that allows you to sort the users by their first name -
UserCard.tsxCreate a modal that shows the user's full name, email, and phone number when you click on the user card -
UserCard.tsxCreate a modal that retrieves all of the hexathons that a user has an application for. -
App.tsxAdd the Header and Footer frontend components from ourhexlabs-corepackage.
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!