Wedding-App-React-Project This app was created for my project defence @ SoftUni for my React course. The project was generated with React version 18.2.0. React web application for reading and creating wishes, also like and dislike them.
• React 18.2.0 • React Router DOM • React Swiper • HTML • CSS The HTML and CSS is written by myself with basic knowledge and lots of documentation searches. It will be update in future. • Font Awesome
• Firebase • Firebase Store • Firebase Authentication
| Permissions for recipes | User | Guest |
|---|---|---|
| View Home page | ✅ | ✅ |
| View About page | ✅ | ✅ |
| See Wish page | ✅ | ✅ |
| Create WishCard | ✅ | ❌ |
| Edit wish * owner | ✅ | ❌ |
| Delete wish * owner | ✅ | ❌ |
| See all wishes | ✅ | ✅ |
| See all wishes likes | ✅ | ✅ |
| Login | ❌ | ✅ |
| Register | ❌ | ✅ |
| Logout | ✅ | ❌ |
| Send rsvp | ✅ | ❌ |
| See add wish button | ✅ | ❌ |
| See guests page | ✅ | ❌ |
##RSVP Wedding App
What Is an RSVP? The term "RSVP" comes from the French expression répondez s'il vous plaît, meaning "please respond." If RSVP is written on an invitation, it means the host has requested that the guest respond to say if they plan to attend the party.This WebApp introduce the unique story of the grooms and gives them opportunity to get responses from their guests .Also the guests can write their wishes at the Book of wishes.
###Start the app
To start the application install all dependecies for the client and the rest-api with
npm install.
Then start the client with
npm start.
This will navigate to http://localhost:3000/ in the browser.
Or you can see live demo here : https://react-sofuni-weddingapp.web.app/ (NOTE that css will break the app on mobile screen )
Invites the user to log in to their account or to register.
Navigation have changed.
The logout action is available to logged-in users. Upon success, clear any session information and redirect the user to the Home page.
Register create user inside the database with username, email and password. Password inside the database is hashed and both passwords must match! if there is error like: unknown user or weak password and more .. message is shown in red letters. After successful registration redirects to the Home page, with an already logged-in user.
Validations:
Logging an already registered user with the correct email and password. if there is error like: unknown user or weak password and more .. message is shown in red letters.
After successful login redirects to the Home page, with an already logged-in user.
Validations:
The logout action is available to logged-in users. Upon success, clear any session information and redirect the user to the Home page.
Here We have Swiper Component with every wish that is saved in our Database . You can move the cards with click and mouse move. There is pagination as well. If there is no wishes -paragraph appears with text “No wishes yet ”
The +ADD Button shows Modal with input fields: NAME : We expect name here Photo : Image Url Related: What is you relationship with the grooms Message: and you wish With click on SEND button we create new Wish in this section We cansle the operation with click on Close or anywhere out of the modal area.
On this photo is clicked on Edit button It opens another modal only over the card section and gives you the same inputs wich changed the commend .
That can happen only if is owner
Every Wish card has two emoticons in the right top corner which shows likes and dislikes with click on the emoticon you can add like or dislike
This is how it looks for GUEST - buttons are not visible
###Invitation Page
Shows Invitation and direct you to leave your respond in RSVP page
Here we have form with input fields ,select options field and textarea. On Submit this information is saved in our database and is shown in our Guest page.
The Rsvp Data from a user is displayed in order: user.name will be attending user.event For all the Data in our FireStore
Here you can see More details about every guest respond. With click on more details button you will be redirect to url with specific id of the respondUser.
This is how it looks for GUEST - buttons are not visible
This is static page for now describing grooms unique story !
If the url is not valid Page 404 is rendered!
