edwardabboud / sym-react-app

SYM-State Your Mind

Every user is able to create a post. This post will have two inputs the beginning and then the statement finishing the sentence. The statements will be sorted by most up-voted. If any other user should like that statement they can create another tag-line to it and it will be added to the thread. A statement (thread) should have an expiration date if not updated (commented on) for about 24h, it should be deleted. Each user is able to create their own new thread or comment on an existing one. The comments will also be sorted by most liked (by default). the user might want to have the option to post anonymously.

Check out a deployed version below. Deployed version

Screenshots

Screenshot 1/4

Screenshot 2/4

Screenshot 3/4

Screenshot 4/4

1. Setup

First, to setup all the directories run the following in the main directory:

npm install npm run setup

Copy the .env files and make sure the credentials are correct

To run the app in dev mode you can run the following command in the main directory:

npm run dev

2. Code structure

client
├── public
└── src
|   └── __tests__
|   └── __testUtils__
|   └── components
|   └── hooks
|   └── pages
|       └── __tests__
|       └── components
|   └── util
|   index.jsx
cypress
|   └── fixtures
|   └── integration
|   └── plugins
|   └── support
server
└── src
    └── __tests__
    └── __testUtils__
    └── controllers
    └── db
    └── models
    └── routes
    └── util
    index.js

sym-react-app's Issues

upVotes and downVotes should be done in the backend

fix the footer links

the footer links aren't changing when the user is logged in or out

Choose colour palette and fonts

Context-fetch

The userInfo context should check if there's a token:

• if the token exists run the fetch for the user details
• if the token does not exists let the context be empty

netVotes should be calculated in the backend

Login page

if the user already has an account

• they should be able to login with their username/email
• password (only 1 input)
• submit button

Create a first timer landing page

This page should only show right after the sign up:

• bullet point instructions
• 2 sentence description
• reporting (if added)

add background to home page

the user should be bale to clearly see the cards without distraction

add background to the create statement page

create a character countdown for inputs

Wherever there is an input, the user should be able to see how many characters they can still input

Clean up the code

Refactor where possible
Comments
remove commented out code

Self destruct statements after x amount of days

Footer

In the footer i want to be able to access any page from the nav bar

• logo
• home
• profile
• logout
• create a statement
• copyright

Create comment section

The user should be able to see all the tags that were inspired from the statement clicked on:

• fetch the tags that have the same statementID
• create a component that can allow the user to browse and vote for the statements

Home page fetch x amount of statements at a time

The user should be able to scroll through all the statements:

• setup the homepage to have a scroll pagination
• loading at the bottom to show the pagination in process
• every time the home page fetches new data it should be the same amount at a time

Home page sort the statements

when fetched:

• the statements should be sorted based on how many likes they have
• possibly also by how many tags they have (for now better not to worry about this)
• if the user votes for anything it shouldn't fetch everything again.

SYM-Score

Every time a user creates a statement they get X amount of points:

• transaction in the backend
• we need to create the SYM score in the database
• we need to include the SYM-score adder in the HTTP requests
• we need to display the SYM-score on the profile

Homepage

As the user I want to:

• land on a page that will give me a sense of what the app does
• I want to be able to sign up directly if i don't have an account
• I want to be able to login quickly if i do have an account
• I want to see some stats of the amount of statements and the amount of users

Technical requirements:

• screenshot or a similar background type thing
• sign up form
• login button
• counter of the amount of users

Avatars

A user should be able to select their desired avatar:

• starting with x amount of unlocked ones
• every time they pass a certain tier of SYM-score they unlock some more

Create the model for the tags

the model for the tags should contain:

• postID
• tagID
• fullStatement
• statementEnd
• taggerID
• upVotes
• downVotes
• netVotes

This should also update the statement:

• taggersID
• should give a point to the original user

Add tagging functionality

The user should be able to:

• tag on the statement they see on the home page
• this should either be done by clicking on the card itself or through a small button (or both)
• when clicked the user should only be able to edit the second half of the statement
• once submitted the user should also get some symScore
• the user should also be able to move through the other tags
• vote for the other tags
• the tags should show by order of votes (highest to lowest)

Create statement

The user should be able to create a statement:

• the form to create the statement
• the form is split into two section (First half and second half)
• the user is able to successfully submit this statement

create public profile page

If the user is accessing a profile that is not theirs:

• the route should be different
• they should not be able to see the private data of the profile owner
• they should not be able to take any actions there

Add bg image to statement details page

Add the username to post cards

The user should:

• see the username of the original poster
• potentially be able to click on the username to see the profile (TBA)

create an active statements on profile

when a user accesses a profile page:

• they should be able to see all active statements by that profile owner
• this should be possible for both profile owners and other users
• the user should still be able to interact with the statements just like they would on the home page

infrastructure for deleted statements

When statements are deleted:

• create a new collection where all the previous data can be stored.
• alternatively look into and additional "Expired" field on the existing collections which will prevent the data from being sent to the client

Error component

Fix the styling and placement of the error component for all the pages

Navbar username

Feed the username into the navbar so when the user is signed in they can see their username in the navbar

Home page

On the home page:

• a user should be able to see all the statements by other users.

header

Fully responsive header with ability to detect if the user has already logged in or not

• preferably a dropdown for logout and profile
• home button
• • symbol for quick statement
• logo

About page

On the about page the user:

• should be able to read a summary of what this is
• should know why this is created
• See some stats about the app (how many users + how many statements)
• know a little about the privacy of their data

Profile Page

on this page i want to be able:

• to see all my details
• edit my profile (username, maybe password, email)
• delete my profile
• see the total number of statements i have done and how many are still live

Create the statement component for home page

Change password

Allow the user to change the password form their profile page:

• when the user clicks on change password they get prompted to enter their current password
• they also should enter the password twice
• if the password is correct and the two passwords match they get to submit the request

Statement Details Page

The user should be able to:

• see the full statement
• see the author of the statement
• click on the author to go to their profile
• up vote / down vote
• add a tag
• see all the tags (sorted by votes)
• upvote and downvote the tags
• click on the tagger's profile

Notification//Error//Loading

Make sure all pages and components that need them have these 3 elements