Development Setup

Welcome to Development Setup!

If you are reading this you are ready to contribute to c0d3.com!

To begin we will need to set up the code base on your own machine. To do this we will be creating a copy of the c0d3 GitHub repository.

Prerequisites

• Yarn
• Node
• Docker
• Docker-compose

Instructions

Forking and cloning the repository

1. Click on the button in the top right corner with the text Fork to create a copy of this repository.

2. After forking you will be redirected to your fork repository page. Click on the "Code" green button and copy the ssh or https url.

3. Navigate to your terminal and clone git clone *url-goes-here*.

4. After cloning, you will want to change the current directory to the c0d3-app folder that was created with cd c0d3-app.

Setting up the project

1. Run yarn install to install all of the dependencies needed to run the app.

2. Copy and rename the .env.example file to .env in your c0d3-app directory (on Linux and MacOS this can be done with cp .env.example .env). That file already contains the correct database environment variables for the docker container we use for development. For the API keys ask in engineering chat. Port numbers are completely arbitrary, as long as docker-compose.yml is consistent with this .env file you're good. Never commit the .env file as it may contain secret API keys.

3. Build docker images. Go to docker directory (cd docker) and type docker-compose build. It will take some time for docker to pull and install everything. In the end you will have one container with a postgres database and one container for mattermost.

4. Now you can start the docker containers with docker-compose up -d. To stop all containers run docker-compose down.

5. Go back to the root directory (cd ..) and run yarn db:init to create the development database with fake data, needed to run the app. When prompted to reset the database just confirm by pressing y.

Start the app

Start the app by running PORT=4000 yarn dev. If everything went right you will see the landing page. There are three premade users:

• admin:password (admin, passed all lessons, can review submissions)
• leetcoder:password (passed all lessons, has a submission for each challenge, gave stars for admin user)
• newbie:password (fresh new user).

To submit challenges through the c0d3 cli:

1. Logout c0d3 logout.
2. Login to your local server c0d3 login --url http://localhost:4000/api/graphql.
3. Submit your code c0d3 submit --url http://localhost:4000/api/graphql It should be visible on your local setup.

To connect to postgres database inside container:

1. Open bash console inside postgres container docker exec -it c0d3_db /bin/bash.
2. Connect to postgres psql -U c0d3_admin -d c0d3.

If you have psql installed locally you can type psql -U c0d3_admin -h localhost -p 7000 -d c0d3 with the same result.

There are also various useful graphical database management tools like pgAdmin and dBeaver.

package.json scripts

• db:init: initializes the database, clears tables if they exist, runs all Prisma migrations, and seeds with fake data.
• db:seed: only seeds the database with the fake data.
• db:up: shortcut to start the Postgres docker container.
• db:down: shortcut to stop the Postgres docker container.
• dev: starts the Next.js dev server.
• build: runs Next.js builder.
• start: starts the Next.js prod server, requires running build before it.
• lint: checks the project for linting errors.
• lint:fix: same as lint but also applies automatic fixes.
• autofix: same as lint:fix but also applies SVG optimization.
• storybook: starts the storybook server.
• build-storybook: build storybook components.
• test: runs the testing suites and calculates the coverage.
• ts-node: used to run typescript files in the cli.
• type-check: runs the typescript compiler to check for type errors.
• generate: generates the graphql/index.tsx file from the graphql schema.
• postinstall: runs automatically after yarn install, used to generate the local Prisma client.
• prepare: runs automatically after yarn install, used to set the git hooks with husky.
• vercel-build: used only when deploying on Vercel, custom build command for deployment.

Known problems

Snapshots are failing with:

- colSpan={5} + colSpan={4}
- href="#" + href="/#" Or yarn autofix is failing with Component definition is missing display name in containers/withQueryLoader.tsx error.

You most likely installed a new module by using npm instead of yarn. While in theory these tools should be interchangeable, in practice it can result in such weird errors. Recloning git repo should help.

You are now all set up on your machine! Keep up the great work and thank you for your contributions

👍