Our goal for this project was to build a clone of Facebook - 'Spybook', specifically for the superhero community. Our aim was to create a fun but professional looking social media website.
Our user story:
- Users can sign-up to the platform with their own display picture.
- Users can log in and sign out of the platform.
- Users can post their thoughts and share images with other spybook users.
- Usres can comment on their own and other user's posts.
- Users can like their own and other user's posts.
A significant part of this challenge was to familiarise ourselves with an existing codebase. We debugged the original codebase and implemented a number of new features, replicating some of Facebook's functionality, including posts, comments, likes and the ability to upload images.
Spybook was written with JavaScript, CSS and JSX. Here's an overview of the technologies we used to build our application.
MongoDB is a NoSQL database program that stores data in collections of JSON-like structures, rather than in tables. The application interracts with MongoDB using a tool called Mongoose.
Express is the Javascript equivalent of Sinatra. The structure of this application will feel quite different to what you're used to but the principles are the same.
React is a hugely popular tool that is used to build engaging front ends. The basic principle is that the front end is split up into components, each of which could include some logic, template structure (HTML) and styling (CSS).
JavaScript was originally designed to run exclusively in browsers, such as Chrome. Node is a tool that allows you to run Javascript outside the browser and its invention made it possible to build full stack Javascript apps.
We also used...
- Jest for unit testing on the back end
- Cypress for end-to-end testing and component testing, on the front end
- Mongoose to model objects in MongoDB.
- Nodemon to reload the server automatically.
- Firebase to store images in a remote database.
- Heroku to deploy our application to the web.
- Bcrypt to encrypt user passwords.
- Users can like other user's comments
- Users can send private messages
- Users can send and recieve friend requests
- Users have their own profile pages
- Users can upload and share videos
- Users can create and join groups
-
Fork this repository
-
Clone your fork to your local machine
-
Install Node.js dependencies for both frontend and backend (API)
; cd api ; npm install ; cd ../frontend ; npm install -
Install MongoDB
brew tap mongodb/brew brew install mongodb-community@5.0 -
Start MongoDB
brew services start mongodb-community@5.0
- Start the server
; cd api ; JWT_SECRET=SUPER_SECRET npm start - Start the front end
In a new terminal session...
; cd frontend
; npm start
You should now be able to open your browser and go to http://localhost:3000/ which directs you to the hompeage, where you can sign-up or log in.
(Add heroku link here)
This project was created by:
Follow the Project Setup / Running the application steps above to build upon our exsiting project. Open source contributions can include translating to other languages, adding new features, and improving and expanding test functionality.
We welcome any and all contributions.