Mars Attracts

"Mars Attracts" is a fictional dating website for celebrity aliens, made using React. The functionality is similar to that of a social network, with users being able to register and login, request, add and remove friends, chat in the chat room, and write on other user's 'walls'. This project was completed during my time at SPICED Academy, where I studied from July - August 2019.

The main purpose of the project was to teach us React, and was built in stages, with Redux being introduced later in the project. The code may seem inconsistent, with some components being class components, others being function components with hooks, and Redux used only in certain components. This was deliberate as new technologies were introduced to us piece by piece. Future React projects will be more cohesive.

---

Demo

Note: The registration and image upload functionality has been disabled to prevent unsolicited text and images being uploaded

You can login using:

• username: yoda@gmail.com
• password: y

https://mars-attracts.herokuapp.com

Technology used

React.js, React Hooks, JavaScript, Redux, Node.js / Express, Postgres / SQL, AWS / S3, Heroku, CSURF, JSX, CSS

Preview

Register your profile, log in and change/edit your profile picture and biography.

Search for other users and send crushes(add friends.)

Break hearts (delete friendships), accept crushes (accept friend requests) and chat in the chat room.

Features

• Users can register a profile, make edits to their profile, log out, and log back in again.

• Users can edit their profile pictures and biographies at any time on their profile page.

• Users can send crushes (request friendship), accept crushes (accept friendship), and break hearts (delete friendship).

• All existing friends, and friend requests, can be viewed together on one page.

• A chatroom exists where users can "flirt" with each other in real time, this was built using socket.io.

• A 'find friends' feature exists, where users can view the most recent new users and search for other users in the database.

• Users can post messages on other user's walls.

• The total number of users online is tracked and displayed on screen.

Goals while doing the project

• Learning how to use the React framework

• Understanding how class components, function components, and React hooks work, and learning the best pratice for using them.

• Getting to grips with Redux and storing data in state.

• Implenting socket.io to build a chat room and show online users

Goals for the future

• Refactor the code to make it mobile responsive

• Refactor code to use Redux and React Hooks throughout