ShutterBug - a common app for photography lovers everywhere

Application Overview

Shutterbug is a photograph content management application for users to create/read/update/delete posts as well as comment on others' posts via comments, tags, and reactions. To contextualize the content, categories are applied to each post to ensure the users are perusing insights relatable to their interests. As such, admins and authors can create/edit/delete categories as well as individual comments, tags, and reactions. To ensure that the content is appropriate, only admins are allowed to edit and delete pre-existing tags and categories. As authors are able to delete their own comments and posts, an individual page will proliferate with the logged-in user's posts. The overall purpose of my app is to allow users to interact with like-minded individuals and bond over shared communal interests.

To add a spice of fun to the application, I also created darkEST mode. When dark mode is activated on my app, the bat signal will appear which will enable the user to activate darkest mode. If the user "dares to trigger darkest mode," the user is taken to a screen-sized Gotham City modal where Batman's nemesis are animatedly flying around the screen and menacing the city. The only way to defeat the villains is to click on their images. While the user is trying to click and eradicate the villains, the time and click count are displayed so that users can track their progress and play for personal bests. If you do not enjoy darkest mode, sadly you might struggle with cute puppies and/or whimsy.

Technologies Used

To Get Started

Server Side

1. Clone this repository for the server side:

git clone [email protected]:jonathanvanduyne/shutterbug_server.git
cd shutterbug_server

2. Initialize virtual environment:

pipenv shell

3. Install third party packages:

pipenv install django autopep8 pylint djangorestframework django-cors-headers pylint-django

4. Migrate and seed database

./seed_database.sh

5. Get the server running

python3 manage.py runserver

Client Side

1. Clone this repository for the client side:

git clone [email protected]:jonathanvanduyne/shutterbug_client.git
cd shutterbug_client

2. Install dependencies:

npm install
npm update

3. Run the code

npm start

3. Login credentials: (Admin = Belle, User = Daniel)

username: belle_gen_z_queen (default)
password: shutterbug (default)

username: daniel_reads_big_books
password: shutterbug (default)

ERD

https://dbdiagram.io/d/64e90c6902bd1c4a5e6d3f3e

Wireframe

https://www.figma.com/file/uD5Ql9MYiwsj6XPuNKgp9z/ShutterBug-Capstone?type=design&node-id=0%3A1&mode=design&t=tGzGgnQLe3fFSQTR-1

Features

CRUD - everywhere

Social Media Posts - posting photos, title, text, author-info, category, publish-date, comments, reactions, flagging posts, tags

Direct Messaging - all threads display and individual threads to message other users

Admin Manager - Site Admins can take down flagged posts and alter whether deviant users can use the app and display content

Profile - User can view their profile info as well as individual posts

Dark mode - light and dark mode views on each screen

Darkest mode - interactive click game to defeat Batman's nemesis

Login-- Landing Page-- Posts-- Create Post-- Direct Messages-- Direct Message Thread-- Admin Page-- Admin Flagged Posts-- Dark Mode-- Darkest Mode-- Win Page--