mustafaomousa/Rumblr

A full stack application clone of Tumblr, but with cars.

Rumblr

Rumblr is a single page web application "Tumblr" clone where users can post vehicle related images along with a message.

Table of Contents

• Live Site
• Usage
• Technologies Used
• MVP Feature List
• Frontend Routes
• Database Schema
• API Routes
• Tests
• Contact

---

Usage

To launch Rumblr in a development environment:

1. cd backend and create a .env based off .env.example. Fill in the newly created .env file with your PSQL user and database credentials.

2. Install dependencies in both backend and front-end directories

   • cd backend && npm install
   • cd frontend && npm install

3. In the backend/ folder run the following command to create,migrate, and seed the database.

   • npx dotenv sequelize db:create && npx dotenv sequelize db:migrate && npx dotenv sequelize db:seed:all

4. Run the following two commands from the root folder each on seperate terminal windows:

   • cd backend && npm start
   • cd frontend && npm start

5. Navigate to http://localhost:3000/ to interact with the Rumblr app!

---

Technologies and Libraries Used

Server (backend)

• Sequelize ORM
• PostgreSQL
• Express

Client (Javascript)

• React
• Redux
• AWS S3
• Material UI
• Cypress.io

---

MVP Feature List

1. Sign up, log in, log out, and demo-user login.

• Users can sign up, log in, and log out.
• Users can login as demo-user to interact with the application.
• Authenticated users can navigate to their Profile which displays their profile picture, bio, and posts.
• Authenticated users can navigate to Settings which allows them to update their profile picture, bio, username, email, and/or password.

2. User posts.

• Authenticated users can create posts with a image and message.
• Authenticated users can like, edit, and delete their own posts.
• Authenticated users can view the newest posts, and a random post on the Discover page.

3. User likes.

• Authenticated users can like other users posts as well as their own.
• Authenticated users can remove their like from other users posts as well as their own.

---

Client (backend) Routes

---

Server (frontend) Routes

/

This page displays the Welcome Page where users can log in or sign up.

/discover

/users/:userId

/settings

/about

---

Database Schema

Users

column name	data type	details
id	integer	not null, primary key
username	string	not null, unique
email	string	not null, unique
bio	string	nullable
profilePicture	string	nullable
hashedPassword	binary string	not null
createdAt	datetime	not null
updatedAt	datetime	not null

Posts

column name	data type	details
id	integer	not null, primary key
content	string	not null
body	string	not null
userId	integer	not null, foreign key
createdAt	datetime	not null
updatedAt	datetime	not null

Likes

column name	data type	details
id	integer	not null, primary key
postId	integer	not null, foreign key
userId	integer	not null, foreign key
createdAt	datetime	not null
updatedAt	datetime	not null

---

Tests

Cypress.io

1. cd backend && npx dotenv sequelize db:seed:all
2. cd frontend && npx cypress open
3. Run individual or all integration specs.

---

Contact

name: Mustafa Mousa

email: contact@mustafamousa.com

Portfolio LinkedIn