Git Product home page Git Product logo

hatchways-messenger-app's Introduction

Messenger

A one-to-one realtime chat app.

Working inside a Cloud Environment

Environment Setup

This repository supports Gitpod, so you can quickly setup your dev environment in the cloud by opening https://gitpod.io/#https://github.com/<your-username>/<your-repo-name> in your browser. A Gitpod workspace looks almost identical to Visual Studio Code. gitpod-demo When you open a Gitpod page,

  • Setup scripts will be automatically run in two integrated terminals - one for backend and the other for frontend.
  • You can find Remote Explorer extension on the left edge. This extension shows the list of open ports and lets you connect to those ports by clicking the browser icon.

All changes you make inside this Gitpod workspace remains in the cloud even after you close the tab. You can access your existing workspaces on Gitpod dashboard, and resume your work by opening the workspace again.

Using Git inside Gitpod

You have full access to git CLI within Gitpod terminal, and Visual Studio Code's git integration is available too if your prefer GUI. You would need to create a new branch and push it in order to open a PR on GitHub. Some common commands are listed below:

  • git checkout <branch-name>: switch to a specific branch.
  • git checkout -b <branch-name>: create a new branch.
  • git push: push changes to the remote repository (GitHub in this case).

Local Setup

Note: these setup steps are not necessary when running the code on GitPod. They are only necessary when running the project on your local machine.

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

image image

hatchways-messenger-app's People

Contributors

dustinle48 avatar

Watchers

 avatar

hatchways-messenger-app'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).

In your PR description, please share the steps you followed to debug this issue. What tools did you use?

Feature: Database Redesign

THIS ISSUE WAS AUTOGENERATED BY HATCHWAYS
Currently, our app only allows conversations between two users. We would like to allow conversations with groups of 3 or more users. This ticket is not to implement this full change, but to help us plan out what that change would look like. Please make a PR with the changes to just the database models that you would use to implement this feature. Please include "draft" in the title of the PR. Then, in the PR description, write out notes to answer the following two questions:

  1. What additional (non-database) changes are needed to implement this feature (we want this to be high level but thorough)?

  2. If our app were already deployed, what steps would we need to take to move to this new feature without disrupting service for current users?

In your PR description, please explain a couple different ways we could have designed the database for this feature. What are the benefits and drawbacks of each?

Feature: Implement a read status for messages

THIS ISSUE WAS AUTOGENERATED BY HATCHWAYS
We want to track for each message if it has been read by the recipient, and to make several front end UI updates with this information, such as displaying how many unread messages there are in a given conversation.

You can reference the spec in this Figma file for the various updates to be made to reflect unread messages. (Note that the Figma file includes more than just the spec needed for this feature). Please include a screenshot in your PR description showing your updated UI.

In your PR description, please explain a couple different ways we could have stored the read status in the database for this feature. What are the benefits and drawbacks of each?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.