Working with git is a HUGE part of the final project. This is how you should be working with git in the final project:
This repo has two branches:
master
- Used for deployment. This branch should be as clean as is possible. NEVER directly commit to this branch!develop
- A branch where we do all development. That means that all feature branches should be merged into this branch. Very important!
Lets get started with our first feature. Lets say we should build a cookies popup:
- Fork this repo. You now have a version of this repo on your profile.
- BEFORE WE WRITE ONE SINGLE LINE OF CODE, create the feature branch where we will do all our cookies popup development.
git checkout -b cookies-popup
- Now we write all our code in the
cookies-popup
branch, we make good commits that are not too bit, not too small! We push our branch so it is to be found in our forked repo. Cool, so far so good! - We now want the
cookies-popup
branch to go into https://github.com/HackYourFuture-CPH/class07-final-project. We do this with a pull request (PR). BUT BEFORE we do that, there are a couple of thing we need to do before:- Lets say it took a week for us to write
cookies-popup
and in that time there were 5 branches merged into thedevelop
branch of https://github.com/HackYourFuture-CPH/class07-final-project. Hmm that means that ourdevelop
branch on https://github.com/YOURUSERNAME/class07-final-project is out of date. So if we just created our PR we our feature might not work (because the codebase was changed). Lets say that in one of the 5 commits someone gave the body az-index
of 1. Our popup has noz-index
, so when the cookies popup should be shown it is not visible. So we need to sync ourdevelop
branch with class07develop
branch. Marta talked about that, but read this aswell: https://help.github.com/en/articles/syncing-a-fork - Okay, so now our
develop
branch is in sync with class07develop
. Perfect! To get those 5 changes lets mergedevelop
intocookies-popup
- We now run our code and see that the popup is not shown (see above why). Lets fix it by giving our
cookies-popup
az-index
of 2, create a new commit to our branch. - NEVER commit something that is not running! You will break the build for everyone! so ALWAYS run the code before you create your PR.
- Lets say it took a week for us to write
- Now we can go to https://github.com/HackYourFuture-CPH/class07-final-project and create a PR that merges
cookies-popup
intodevelop
. This PR is really nice, check it out: https://github.com/HackYourFuture-CPH/class07-final-project/pull/89 - Now we have made our PR, great. Someone is going to review this PR and might tell us to change a variable name. Now we simply make the change locally on the
cookies-popup
, make that commit, push it and this commit will automatically show up on the PR. - Everything look nice now and someone merges
cookies-popup
intodevelop
. Awesome that was our first feature :) This maybe seems like a big hassle, but once you get used to it, it is not so bad!
- ALWAYS run code before a PR is made.
- No committing
console.log
- No committing merge conflicts!
- Work in seperate files! When you make a new feature, the first thing you do is create a new file for that (of course if it makes sense). Especially for components.
Install Prettier - Code formatter
Enable format on save: https://github.com/prettier/prettier-vscode#format-on-save
Follow these best practices for coding: https://github.com/HackYourFuture-CPH/curriculum/blob/master/review/review-checklist.md
This can be used as a checklist for every PR you make. Go through the list and see if you have used all the best practices
Template project to kickstart your Node development process using Express routing framework
First clone the repo on your local machine using a terminal or a git client.
Run npm install
to install all required dependencies.
Refer to Deployment section on how to deploy and run.
Node will run on any linux based kernel system as well as Microsoft Windows.
Refer to this points on how to install on your OS:
Install it from here:
Windows: https://dev.mysql.com/downloads/windows/installer/
Mac: https://dev.mysql.com/doc/refman/5.7/en/osx-installation-pkg.html
In order to start the project make sure that you have Node, mysql workbench and npm installed. Refer to section Prerequisites on how to install both.
When done run the following commands:
npm install
Environment variables are used for working with sensitive data like passwords and usernames.
Fx connecting to a database, we dont want to commit the code that shows our password. Therefore we use environment variables instead. The .env SHOULD NEVER be commited and is in the .gitignore file (ignored by git).
Here is how to get started:
- Create a new file in source folder and name it .env
- Copy contents from .env.example into newly created file .env
- Change the database part to fit your database user and password
Only thing Windows users have to do is run the following command anywhere in their terminal
(not necessarily the project folder):
npm install -g win-node-env
Refer to this post on stackoverflow for more info.
Working with sql we use a tool called knex which helps with writing queries and with changing the database structure. Check these out: https://www.quora.com/What-is-Knex-js https://knexjs.org/#Builder-identifier-syntax
- Install knex cli globally with:
npm i -g knex
- after the server runs and you see a
connection to <db_name> db successful!
message you are ready to migrate tables - to migrate tables and get the seed data. First change your
pass
anduser
string to your real password and username. That's because theprocess.env
is not run on db:setup. Now writenpm run db:setup
. Go to your mysql workbench and see the database calledhack_your_future
, you should be able to see some tables and some data in the tables.
knex seed:make 05_module_teachers
knex migrate:make user
knex seed:make 01_user
Navigate to project folder in your terminal:
- On Linux or Mac run the following command:
npm run dev
- On Windows first refer to [Setting up on Windows] section and then run:
npm run dev
AWS is used for uploading the podcast files on a AWS S3 bucket. There is a user on the AWS that has AmazonS3FullAccess
. There is not a AWS root key, but ONLY a key and a secret key for the AWS user.
If you need the key and secret to put into the .env file, write to the project manager of the project.
REMEMBER, this key should be kept super secret!!! NEVER add this to any PR!!
- Filip Malek - Initial work - REX500
This project is licensed under the MIT License - see the LICENSE.md file for details
- Hat tip to anyone whose code was used
- Inspiration: nephross
To get the certificate we need to make sure that you know our stack, for us to recommend you to another company. So how do we figure this out? We look through homework and we look through the commits you create in the final project.
Its important to say that you dont need to be an expert in everything, not at all!! You can be more interested in the frontend or the backend, but we then need to see that interest.
But if you are missing 4 react homeworks and the one you have committed is super basic. AND we dont see some more advanced react usage, well then it becomes super hard for us to recommend you to a company that does react. Because we simply dont know if you have the skills.
If we fell there are gaps, we will talk with you as early as possible, so you have time to show your worth!
If it comes so far that we cannot give you a certificate you can either join for the next final project or make a project (or we give you a project) where you show your skills. We truly want to give you the certificate and will help you as much as we can to get you there!
A little more specific here is what we are looking for:
- Semantic html
- Styling
- Responsiveness
- Layout
- If it looks pretty DOES NOT MATTER!
- Javascript
- Variable naming
- Function scope
- ES6
Classes
,promises
,map
,filter
and all that shabang
- Node
- Express
- Nice structure
- Can create an api using the database. CRUD
- Everything modularized (Split into smaller parts)
- Database
- Create tables
- Queries
- React
- Using the react way of developing, SUPER IMPORTANT! https://reactjs.org/docs/thinking-in-react.html
- Knows how to use state and prop
- Well designed components
- Can use the api created from node