Giter Club home page Giter Club logo

wedding-app's Introduction

Happily Ever After


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

Imgur

Component Tree

Whimsical

Imgur

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

Imgur


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.

wedding-app's People

Contributors

ccano2011 avatar

Stargazers

avatar

Watchers

avatar

Forkers

cyberdragonwizard

wedding-app's Issues

Token Issue

PROJECT ISSUE TICKET

Copy and paste the raw MD code of this template, then replace the quote blocks with your detailed, clear descriptions.

Unexpected Behavior

I am having the same issue with passing through an id for my handleDelete

Expected Behavior

My post would delete when I click "Delete Post"

Reproduce the Error

Describe the steps we can take to reproduce the error, i.e.:

1. Clone this repo.
2. Run `rails s` followed by `npm start`.
3. Navigate to the UserPosts.jsx page.
4. Click on "Delete Post", which should run the destroyPost function that was imported from the posts services.
5. See the subsequent error in the console.

Documentation

Include the exact error message, and if helpful, any supplemental documentation, such as screen captures.

ActionController::RoutingError (No route matches [DELETE] "/post/[object%20Object]"):
&
xhr.js:177 DELETE http://localhost:3000/post/[object%20Object],[object%20Object] 404 (Not Found)

Attempted Resolution

If you haven't already, Google your error message now. See if those error messages return an answer. Include at least 2 resources you've tried to consult such as walk-throughs, stack overflow articles, and other discussion threads related to your error.

1. Could not find a resource that helped
2. Tried different variations of the following code:
`const handleDelete = async (id) => {
        await destroyPost(userPosts);
        userPosts.filter(post => post.id !== id)
    }`

Token Issue

PROJECT ISSUE TICKET

Copy and paste the raw MD code of this template, then replace the quote blocks with your detailed, clear descriptions.

Unexpected Behavior

The id of the post is not being passed to the "EditPost.jsx" component for me to successfully update the post.

Expected Behavior

When I click "Edit Post" in the "Cardboard.jsx" component, I should be able to edit the post that the user made.

Reproduce the Error

Describe the steps we can take to reproduce the error, i.e.:

1. Clone this repo.
2. Run `rails s` in the main directory and then `npm start` in /client.
3. Navigate to the landing page.
4. Click on Edit Post, which should return the API data set.
5. See the subsequent error in the console.

Documentation

Include the exact error message, and if helpful, any supplemental documentation, such as screen captures.

xhr.js:177 GET http://localhost:3000/posts/undefined 404 (Not Found)
dispatchXhrRequest @ xhr.js:177
xhrAdapter @ xhr.js:13
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:61
Axios.<computed> @ Axios.js:76
wrap @ bind.js:9
getOnePost @ posts.js:11
fetchPost @ EditPost.jsx:65
(anonymous) @ EditPost.jsx:68
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157
createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

Attempted Resolution

If you haven't already, Google your error message now. See if those error messages return an answer. Include at least 2 resources you've tried to consult such as walk-throughs, stack overflow articles, and other discussion threads related to your error.

1. https://stackoverflow.com/questions/48447266/not-able-to-fetch-data-from-api-endpoint-in-reactjs
2. https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually

Token Issue 3

PROJECT ISSUE TICKET

Copy and paste the raw MD code of this template, then replace the quote blocks with your detailed, clear descriptions.

Unexpected Behavior

Getting a warning with a conditional redirect when clicking on an endpoint that I feel will break the code on deployment

Expected Behavior

no errors or warnings when testing out all CRUD actions

Reproduce the Error

Describe the steps we can take to reproduce the error, i.e.:

1. Clone this repo.
2. Run `rails s` followed by `npm start`.
3. Click on "Your Posts" button when in the 'localhost:3001/corkboard' endpoint.
4. See the subsequent error in the console.

Documentation

Include the exact error message, and if helpful, any supplemental documentation, such as screen captures.

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at UserPosts (http://localhost:3001/static/js/main.chunk.js:1902:91)

Attempted Resolution

If you haven't already, Google your error message now. See if those error messages return an answer. Include at least 2 resources you've tried to consult such as walk-throughs, stack overflow articles, and other discussion threads related to your error.

1. Could not find a resource that helped

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.