Happily Ever After

• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Hierarchy
    • Time Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions
• Change-Log
• Special Thanks

Overview

Happily Ever After is a full CRUD React web application that will allow for couples planning their wedding to have a website for guests to RSVP, post their well-wishes, & view the photos of the bride & groom throughout their years in addition to the standard wedding website fare.

MVP

• Build a functional Ruby-on-Rails backend with a database that will utilize CRUD with 2 tables; (User & Posts)
• Set up one association between the 2 tables (1:m)
• Build a feature complete React frontend with CRUD
• Build out the 10 screens (Our Story, Photos, RSVP, Cork Board for Posting, Resgistration, Login, Create post, edit post, registry, Home, & Travel) with the apropriate number of components to manage the screens
• Build out the controllers that will allow the frontend to display and update data from the backend
• Style using Styled Components & React-Scroll

Goals

• Demonstate my understanding of data table associations,
• Create a template so that I may be able to use this for future projects,
• Improve my CSS abilities,

Libraries and Dependencies

Library	Description
React	Used for the frontend.
React Router	Used for client-side routing.
Axios	Make axois calls to the backend from the frontend.
Styled Components	Better organize my CSS & improve overall code structure.
Rails	The framework used to operate the backend.
PostgreSQL	Relational management between the databases/tables.

Client (Front End)

Wireframes

Figma

Component Tree

Whimsical

Component Hierarchy

Use this section to define your React components and the data architecture of your app. This should be a reflection of how you expect your directory/file tree to look like.

src
|__ assets/
      |__ images
|__ shared/
      |__ Nav.jsx
      |__ Burger.jsx
      |__ MobileNav.jsx
|__ screens/
      |__ corkboard/
             |__Corkboard.jsx
             |__Corkboard.css
             |__Registration.jsx
             |__Registration.css
             |__Login.jsx
             |__Login.css
             |__Editpost.jsx
             |__Editpost.css
             |__Createpost.jsx
             |__Createpost.css
             |__Userpost.jsx
             |__Userpost.css
      |__ ourstory/
             |__OurStory.jsx
             |__OurStory.css
      |__ home/
             |__Home.jsx
             |__Home.css
      |__ RSVP/
             |__RSVP.jsx
             |__RSVP.css
      |__ registry/
             |__Registry.jsx
             |__Registry.css
      |__ photos/
             |__Photos.jsx
             |__Photos.css
      |__ travel/
             |__Travel.jsx
|__ services/
      |__ apiConfig.js
      |__ posts.js
      |__ users.js
      |__ auth.js
|__ App.js
|__ App.css
|__ index.js
|__ index.css
|__ reportWebVitals.js
|__ .gitignore
|__ package-lock.json
|__ package.json
|__ README.md

Time Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Initialize backend with models for users, posts, and RSVP	L	2 hrs	1 hr	? hrs
Create table associations	H	3 hrs	3 hrs	TBD
Build out CRUD actions	H	3 hrs	30 min	TBD
Test CRUD actions & associations on Postman w/debugging	H	1 hr	3 hrs	TBD
Initialize React frontend with the proper component heirarchy structure	H	30 min	30 min	TBD
Create the Cork board component with the initial CRUD logic	H	4 hrs	9 hrs	TBD
Build out the controllers to connect the frontend to the backend	H	4 hrs	30 min	TBD
Implemment authentication for the Cork board components on frontend	L	3 hrs	3 hrs	TBD
Create the Navbar component w/ styling	H	2hrs	2 hrs	TBD
Create the homepage screen w/ styling	H	2hrs	20 min	TBD
Build out the RSVP component with the appropriate CRUD logic & association	H	3 hrs	30 min	TBD
Build out the remaining components	H	4 hrs	2 hrs	TBD
Style those components	L	6 hrs	10 hrs	TBD
Create MVP media queries	H	3 hrs	6 hrs	TBD
POST-MVP EventListener w/ mobile refactor	H	3 hrs	8hrs	TBD
POST-MVP Refactor the application using Styled-Components to improve code legibility & maintainance	H	3 hrs	TBD hrs	TBD
POST-MVP Add Animations to the styled components (i.e. Fade-ins, photo gallery, etc.)	H	10 hrs	TBD hrs	TBD
Deploy & Test	H	3 hrs	1 hrs	TBD

| TOTAL | | 51.5 hrs | 54.33 hrs | TBD |

Server (Back End)

ERD Model:

draw.io

---

Post-MVP:

• Refactor the application using Styled-Components to improve code legibility & maintainance
• Use CSS framework to incorporate animations
• Add a rotating photo gallery for "Our Story" component

---

Code Showcase:

Use this section to include a brief code snippet of functionality that you are proud of and a brief description.

Code Issues & Resolutions:

Major issue with CORs on the deployed site resolved by doing the following:

• added gems 'rails_12factor' and 'foreman' to my gemfile,
• specified my rails application cors.rb’s origins to only coming from my deployed netlify & localhost:3001, making a Procfile with the heroku commands web: bundle exec rails s & release: bundle exec bin/rake db:migrate.

Change Log:

12/1/2020:

   - Added a 'Change Log' to the README
   - Moved 'Implemment authentication for the Cork board components on frontend' from Post-MVP to the project MVP
   - Added 'Implement Full CRUD to the RSVP component'
   - Updated the file structure as reflected in the 'Component Hierarchy'

12/4/2020:

   - Removed unnecessary components; updated the README & Figma to reflect those changes
   - Updated the 'Time Frames' to better predict the development time & path

01/12/2021:

   - Removed front-end access to the RSVP component; Not needed for this iteration
   - Refactored all the CSS styling for various components along with the appropriate media queries
   - Updated 'Post-MVPs' & updated the 'Time Frames' to represent the time and hours spent for each goal

01/21/2021:

   - Removed front-end service & apiConfig to the RSVP table on the back-end; Not needed for this iteration
   - Refactored all the CSS styling for various components along with the appropriate media queries
   - Updated 'Post-MVPs' & updated the 'Time Frames' to represent the time and hours spent for each goal
   - Updated Figma & Whimsical to represent the current vision of the Project
   - Completed all the first iteration stylings for all the components/screens of the project

01/26/2021:

   - Added alerts for incorrect login & registration errors 
   - Also fixed a routing error that wouldn't allow a user to login if they leave the login screen & return to it
   - Fixed any and all mobile styling issues

02/09/2021:

   - Made the mobile nav functionality more user friendly & seamless
   - Removed all unused code and cleaned up the formatting
   - Refactored 'nav.jsx'
   - Added a 'Special Thanks' to the README to thank those who took their time to help debug and teach me a thing or two along the way
   - Deleted the controller for RSVP & the RSVP component itself

03/22/2021:

   - Updated the README & added new MVP goals for refactoring and better code management

Special Thanks:

A BIG thank you to Daniel Micheal for taking the time to help me debug and introducing me to Styled Components! Also another shout-out to Geoff LaPorte for remininding me about try/catch errors that helped me add alerts for login/registration errors.