rellygudfutos

MEVN Full Stack Application - Photo Gallery to display my photos

DEMO: https://www.rellygudfutos.com

Objective

To build a full stack website where I could showcase my photography.

Overview

A user will be presented with a homepage where they can view the photo grid. Like Instagram, the photos can be clicked to view in list format. This will display more information on the photo such as "camera", "lens", "title", "store link" etc. Unlike Instagram, the grid will display the photos in Packery Format allowing landscape photos to take up more room. A regular user can filter, sort and search for photos in the grid while an admin user can login and run CRUD operations to POST, PATCH AND DELETE photos and tags.

Motivation

PRACTICAL: I would use it regularly to post photos I have taken and use it to link my social media and store on Picfair.

DESIGN: Design challenge - The photography needed to be the main focus. The UI was built to be clear, consise and intuitive. Each feature takes up as little room as possible to allow the attention to be on the photography.

LEARNING: To build an app using the MEVN Stack (MongoDB, Express, Vue & Node) from the ground up.

Tech Stack

Rellygudfutos is created with:

• Vue
• Node
• Express
• Mongoose
• MongoDB
• AWS S3

Demo Screenshots

DEMO: https://www.rellygudfutos.com

1. Login Component

2. Upload Photo Form Component (as admin user)

3. Add Tag Component (as admin user)

4. Delete Tag Component (as admin user)

5. Update Tag Component (as admin user)

6. Photo Grid Component (as regular user)

6.1 Gallery View (Isotope Packery)

6.2 List View (Isotope Vertical)

7. Photo Grid Component (as admin user)

8. Search Photo Component

9. Filter Component

10. Sorting Component

11. Header Component

12. Footer Component

License

MIT © MichaelKerr