This is a frontend project assessment I did with Hatchways.io which involved completing three tickets:
- A Bugfix
- UI Redesign
- New Feature
You can see my progress and feedback by looking at the closed pull requests.
A one-to-one realtime chat app.
Create the PostgreSQL database (these instructions may need to be adapted for your operating system):
psql
CREATE DATABASE messenger;
\q
Alternatively, if you have docker installed, you can use it to spawn a postgres instance on your machine:
docker run -it -p 5432:5432 -e POSTGRES_DB=<database-name> -e POSTGRES_USER=<database-username> -e POSTGRES_PASSWORD=<database-password> postgres -c log_statement=all
Update db.js to connect with your local PostgreSQL set up. The Sequelize documentation can help with this.
Create a .env file in the server directory and add your session secret (this can be any string):
SESSION_SECRET = "your session secret"
In the server folder, install dependencies and then seed the database:
cd server
npm install
npm run seed
In the client folder, install dependencies:
cd client
npm install
In one terminal, start the front end:
cd client
npm start
In a separate terminal, start the back end:
cd server
npm run dev
- Seed the database with
npm run seed
inserver
directory. - Start the backend server with
npm run dev
inserver
directory. - Start the frontend server with
npm start
inclient
directory. - Open Cypress dashboard with
npx cypress open
inclient
directory. - Click on the test suite to run (e.g.
auth.spec.js
).
- You need to seed the database before each run. Because E2E test cases writes data to the actual database, re-seeding is necessary to assure consistent test results.
- The E2E tests are not comprehensive. There is a test for the authentication pages that should pass with the starting code, and some tests for some of the functionality for some of the tickets you will be assigned.
- When you push your changes to GitHub, E2E tests are automatically executed on GitHub Actions. You can find test results under Pull request > Checks > test > Cypress (see screenshots below).