newertkrocker / 260a09

Messenger

A one-to-one realtime chat app.

Local Setup

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

Running the Application Locally

In one terminal, start the front end:

cd client
npm start

In a separate terminal, start the back end:

cd server
npm run dev

How to Run E2E Tests

1. Seed the database with npm run seed in server directory.
2. Start the backend server with npm run dev in server directory.
3. Start the frontend server with npm start in client directory.
4. Open Cypress dashboard with npx cypress open in client directory.
5. Click on the test suite to run (e.g. auth.spec.js).

Notes

• 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).

260a09's Issues

Bug fix: Sending messages

THIS ISSUE WAS AUTOGENERATED BY HATCHWAYS
There are some bugs in our starting code that we would like you to investigate and resolve. First, when you send a new message, it does not immediately appear on the screen. We would like new messages to be immediately added to the chat UI for both existing conversations and new conversations. (Note: This may require more than one change)

Additionally, messages are not displayed in the correct order on page load. Messages should be displayed in order with the oldest messages at the top and newest messages at the bottom.

The starting code has some Cypress tests for this ticket (bug-fix-ticket.spec.js). Please ensure that your code passes these tests before requesting review on your PR for this feature (the README has details on how to run the tests).

All fixes for these bugs can be done on the front end. In your PR description, please share the steps you followed to debug this issue. What tools did you use?

Feature: Sending images - front end

THIS ISSUE WAS AUTOGENERATED BY HATCHWAYS
We would like for users to be able to send images. We would like you to implement the front end of this feature. The backend functionality is already implemented. This feature is described in depth on this page. Please do not use an external library to implement this feature.

In your PR description, please explain a couple different ways we could have handled the UX for attaching an image for this feature. What are the benefits and drawbacks of each?

Feature: New design for login/signup pages

THIS ISSUE WAS AUTOGENERATED BY HATCHWAYS
We’ve received new specs from our designer. Please implement the design for the login and signup pages, and make it mobile responsive. The design spec and needed assets are available in this zip folder, as well as in this Figma file. The spec may need a bit of adapting to fit our use case, so please use your best judgement. Also note that the resources provided include more than just the login and signup pages, but only these two pages should be implemented for this ticket.

Please include a couple of screenshots in the description when making this PR to showcase the styling you've done.

In your PR description, please explain a couple different ways we could have handled code organization for this feature. Are there the benefits and drawbacks for each?