A front-end capstone project from Landon Morgan for Nashville Software School C38.

Brief Proposal

Clients need video projects and provide certain details. A user logs into Commissioner Mordan, a helpful app designed to track information related to the commissioning of video projects. A user can create, read, update and delete video projects.

Project Definition

• Written in React.
• Users can create account, login via Session Storage, and logout
• Ability to create, read, update, delete “Artists”
• Ability to create, read, update, delete “Projects”

Setup

Steps to get started:

1. git clone git@github.com:Iandonmorgan/front-end-capstone.git
2. cd into the directory it creates
3. mkdir api
4. touch api/
5. Download one of the database files:
   1. EMPTY: database.json
   2. SONY RCA FICTIONAL PROJECTS: database.json
6. Move your database.json file into the /api/ directory.
7. Install yarn for dependencies
8. yarn install to build dependencies
9. yarn start to run the app in the development mode
10. json-server -p 7770 -w api/database.json
11. Open http://localhost:3000 to view it in the browser.

Overview

This app is a project management tool for video content creation. When a user logs in, they see a dashboard of current “projects” by artist, with basic information and statuses. The user can expand details of a specific “project” by clicking on it. From there, the user can edit and delete the “project”. The information tracked for each project includes project scope, budget, artist associated, contacts, live date, due+delivery date, status, shoot date(s) past and pending.

(*) Note: this is not true authentication. Email addresses are saved in clear text in the JSON database, and anyone who knows your email could login to see information inside database. Do not store any sensitive information, including, but not limited to birthdates, social security numbers, mother's maiden names, names of first pets, and/or shoe sizes.

Technologies Used

This project utilizes the following:

• This project was bootstrapped with Create React App.
• Semantic UI for buttons, icons, data-tooltips
• React Confirm Alert for confirm alerts
• React Router for page routing
• React-bootstrap for menu, flexible formatting
• React-PopUp for form pop-ups
• react-currency-input for currency input

Skills Utilized

We utilized all skills and concepts learned up to this point in our time here at NSS, including:

1. React: hooks, state, props, routes
2. API calls with: POST, PUT, PATCH, DELETE, and GET (with expand, embed)
3. Javascript: functions, objects, arrays, mapping
4. Persistent data storage with JSON Server
5. Github Scrum workflow
6. CSS styling
7. Modular code
8. Semantic HTML
9. Valid HTML5

Database Diagram