SpeakFriend

An LOTR social media app made for that allows a user to sign up and login, upload images, delete their images, edit their profile, and see all their friends' images.

HOSTED HERE!

High Level Architectural Overview:

Database/Models

The SpeakFriend database is a Postgres database utilizing Sequelize and is comprised of 4 models:

Users
Posts
ProfileInfo

There is a one to many relationship between users and posts, wherein each post instance has a userId, and one-to-one relationship between users and profile info.

MVC Architectural Design Pattern

This project utilizes the MVC (Models-Views-Controller) pattern.

Models:

The Models are my models highlighted above, which can be found in the server/db folder, each in their own file, which a separate folder to list out their Typescript attributes.

Views:

The Views are comprised of all my components in the client/components folder

Gone into in more depth here

Components

Routes

the component serving up all routes, rendered in index.tsx

Main

the first component a user sees when entering Speak Friend. Displays a user greeting and prompt to log in or sign up.

LoginNav & MainNav

2 Nav bar components to be rendered depending on whether user is logged in or not.

Fail

an Error handling communication component that's rendered on both Login & Signup

Components displaying forms that use Firebase auth to sign a user up or log them in

Quote

A reusable component that utilizes The One API to display a random LOTR quote and it's author on each refresh

AllPosts

A component that renders all posts belonging to all users and the Quote component

Profile Page

a component that renders the logged in user's posts and profile info, with a link to the edit component and buttons to delete a post permanently

EditAbout

a component that displays a form so a user can edit their Profile Info.

Controller

The Controller consists of the routes on my Express backend and the functions performing axios calls to them in the client/components/callFunctions folder

Views

Though I didn't get as much time to work on styling as I would have liked due to my work schedule blowing up this past week, I prioritized responsive, accessible design. Each view was made with the intent to be simple, beautiful, and useable on both web and mobile devices. A user can navigate to the feed or their profile page via tab navigation at the top, which also renders a link which will log a user out and send them back to the login page. On both the Profile Page component and the AllPosts component there's a hovering button that renders the Create Post view. I wanted the navigation to be simple, but have a bit of flair. I would have really loved to be able to use Material-UI's focus options to make my site more accessible, but that's on the list of things I'm planning on doing to make this project better in the future.

Main Page