• About the Project
• Demo
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• License
• Contact

In May and June of 2020, I created a photo sharing web application over the course of four project submissions for CS 142: Web Applications, a course taught at Stanford University. The application has similar functionality to that of Facebook, Instagram, and other popular social media platforms. At a high level, this application is a site where users can post photos, comment on and like others' posts, save a favorites list of posts, see community activity, and more.

This application uses the MERN stack - MongoDB, Express.js, React, and Node.js. All of the processes are run locally on one machine, meaning that the website is not hosted online. However, I might explore making those upgrades later down the road.

Note that, due to the Stanford Honor Code, I have not made my code publicly available.

Here are a video and screenshots of the app in action. The user can choose to be in normal mode (orange) or advanced mode (purple).

Login animation

User Profile and Advanced Mode

New Post and @mentions

Favorites

Responsive design and Activity Feed (advanced mode)

For a more in-depth look, watch this YouTube video in which I demonstrate a handful of the latest features that I added.

To get a local copy up and running follow these simple steps.

• Node.js
• MongoDB

1. Clone the repo.

git clone https://github.com/dastratakos/Photo-Sharing-Web-Application.git

2. Install the required npm packages.

npm install

3. Run each of the three following commands in separate terminal windows, and keep the processes running.

mongod --dbpath /usr/local/var/mongodb

./node_modules/.bin/nodemon webServer.js

npm run build:w

4. Open http:https://localhost:3000/photo-share.html in a web browser (preferably Google Chrome).

• Users can mention other users in comments with the @ symbol.
• User profile includes a photo grid with information such as number of likes and the time posted.
• There is an Activity feed to show the 20 latest activities on the site.
• Responsive design for different devices and screen sizes.
• Users can like and unlike posts.
• Users can edit and delete comments that they authored.
• Users can favorite posts and view their saved posts in the Favorites tab. Clicking on a favorite post will display a larger modal.

• Sessions and input allows for multiple users with unique logins. New users can register with a new profile.
• The login page has a smooth animation between the log in and sign up sections.
• Users can comment on photos.
• Users can upload new photos.
• Passwords are salted for additional security.
• The app remembers who is logged in even after the browser is refreshed.

• The web server uses a MongoDB database instead.
• The axios npm package is used to support RESTful API.
• There is an advanced mode that can be toggled on and off. Advanced mode allows users to see how many posts and comments each user has made from the UserList.

• The single page application includes a UserList, UserDetail, UserPhotos, and TopBar components.
• Styling is done using Material-UI components.
• The model data consists of four types of objects: user, photo, comment, and SchemaInfo.
• A web server allows model data to be fetched.
• Users can view photos one at a time with a stepper view, which is useful for users with a large number of photos.

Distributed under the Apache 2.0 License. See the LICENSE for more information.

Dean Stratakos - [email protected]