/chitter-dfa-challenge

Primary LanguageJavaScript

Chitter - Social Media Platform

Chitter is a simple social media platform that allows users to post short messages known as "peeps". This repository contains the frontend and backend code for the Chitter application.

Technologies Used

Frontend

React Bootstrap Material UI

Backend

Express Mongoose Axios Dotenv Express Validator Cors MongoDB Mocha Chai

Getting Started

  1. Clone the repository to your local machine.

  2. Install dependencies for the frontend:

    cd FrontEnd
npm install

  3. Install dependencies for the backend:

    cd BackEnd
npm install

  4. Start the backend server:

    cd BackEnd
npm start

  5. Start the frontend development server:

    cd FrontEnd
npm run dev

For tests, use the following command:

npm test

Component hierarchy

Component Description Children
App The root component that manages the routing - ChitterHome
and main structure of the application. - SignInPage
- SignUpPage
ChitterHome Represents the main content of the Chitter - Sidebar
application, displaying user's feed. - PeepForm
- PeepCard
SignInPage Renders the sign-in form for users to log in. - SignInForm
SignUpPage Displays the sign-up form for new users to - SignUpForm
create an account on Chitter.

Data Flow Table

Component Data Received Data Passed Data Returned Actions
App
ChitterHome signedIn, peeps, user handleAddPeep
PeepForm user handleAddPeeps
PeepCard peeps
Sidebar signedIn, user
SignInPage handleSignIn
SignUpPage
authenticationHelpers.js checkSignIn
chitterAPICalls.js getPeeps, addPeep
asyncFunctions

Tests

Backend Tests

Routes

Index Route (/)

  1. Test that a get request returns all peeps.
  2. Test that a post request ads a new peep.

Authentication Routes (/signIn & /signUp)

  1. Test that it successfully signs in a user with correct credentials.
  2. Test that it returns 401 for invalid credentials.
  3. Test that it returns 500 for an existing user.

Peeps Service

  1. Test that it gets all peeps.
  2. Test that it adds a new peep.

User Service

  1. Test that it gets a user by email.

All Peeps Controller

  1. Test that all peeps are returned.

Add Peep Controller

  1. Test that a new peep is added.

Frontend Tests

Authentication Helpers

  1. Test that checkSignIn returns true when API call is successful.

Chitter API Calls

  1. Test that getPeeps returns peeps when API call is successful.
  2. Test that addPeep adds a peep when API call is successful.
  3. Test that addPeep handles error response.

Acknowledgments