EFConnect

Landing Page
A post and comment
Multiple posts
About Page
Sign Up
Create a Post
Sign In

Inspiration

Everyone has a bad day at some point, whether it be because we made a big mistake, or maybe because we simply woke up on the wrong side of the bed. Sometimes, all we want to hear is some words of encouragement, or to know that we aren’t the only ones that are messing up. This is where our project, EFConnect, comes in.

What it does

EFConnect, short for Encouragement-Failure-Connect, is a web application that allows users to read and create posts about positivity and moments of failure. The goal of this app is to connect people through sympathetic and empathetic messages.

Our project relates to HOTH’s theme by connecting people through sympathetic and empathetic posts. In particular, this project might benefit those who experience imposter’s syndrome or those who want to hear uplifting messages. By displaying both types of posts together, users can see that everyone around them makes mistakes, but also that there will always be people who are there to give reassurance and support.

Currently, users are able to read posts, create and add a post to the page themselves, like and remove likes from posts, and comment on posts multiple times. They can save or discard input when creating a post, and show/hide and see other’s comments when viewing the comment box.

They can also click buttons at the top of the screen to jump to different parts of the page (specifically to the list of posts and the about section), and click at the website title to return to the landing page.

How we built it

We implemented the interface of the website using React, React bootstrap, Javascript, HTML/CSS/SCSS. We also implemented the interactive components, such as creating a post, adding likes and comments to posts with React. (We also took advantage of online UI libraries such as materialUI and colorHunt). We used state in the React class component to create and add a new post. We used React Router to direct the users to pages, and implemented scrolling animation.

Challenges we ran into

One challenge that we ran into was adding another button to create a new post. Since the new post-state is originally stored inside the Navbar and the add functionally is only accessible through the Navbar, we didn’t know how to add another add button outside the Navbar. We looked into React state and made it possible by lifting the state of our post, making the add post functionality available outside the navbar.

Accomplishments that we're proud of

We are proud of our post functionality. We were able to implement a pop-up window for adding a post, the like and add comment sections to read/add comments, and the automatic smooth scrolling.

What we learned

Version control with git and GitHub, React Bootstrap, SCSS.

What's next for EFConnect

Our next step is completing the authentication for user logins and improving our databases. At the same time, the posts the app rendered could have more functionality such as displaying post time, number of views, and so on. Additionally, we would like to deploy this project for public use.