placeholder image

Date:

April 2019

Programs:

Mongo DB, Express/Node JS, React

This mock twitter week long project as a part of the CodeCrew Code School curriculum. The project applies basic usage of the MERN stack to recreate a simplified version of twitter



View the project

Access the GitHub Repo

The Mock Twitter project is a simplified version of twitter created using the MERN stack. Users can create a twitter account and login thanks to backend strategies. They can also add tweets to their account and edit those tweets once published through react forms. Tweets can be marked as private or public by the user. They can view and edit their tweets and account information from their profile page or view tweets made by other users on the home page. If a user is not logged in they can view up to five tweets on the home page that have been marked as public by the user the created said tweet.

This project relied heavily on passport authentication on the backend to make signing up, logging in, or logging out quick and easy. All user information, including their tweets, is stored as objects in the Mongo Database. Testing out the backend functionally on Postmon was integral to the timely and somewhat efficient completion of this project by three day deadline.

A new user creates a twitter account by submitting a form with username, password, profile image. The image is fetched from the database and displayed on the user's profile page. The profile image is masked into a circle and the tweets are displayed below. A form to edit tweets is displayed to the left.

Each user is able the edit their tweets on their profile by clicking the 'edit' link. The link renders a react component inline with a populated update form. All images are being handled as image url's for this project and the option of a public or private tweet is chosen by checking or un-checking the box. Once edited the user can click 'update tweet' to submit the form and the message 'tweet updated' will display in place of the form.

Users can search tweets by clicking the 'Search' link in the navigation bar. This link routes to a react component with a simple form that sends the users search to the backend where a partial search is completed.The results are sent back the front end and formatted in the same style as the tweets when displayed on the home page and user profile. Any tweet that contains the word searched for will be returned.