This web app is a work in progress and aims to provide an easy way to plan events and invite friends sharing the costs with them. The main reason I started this project was to apply my frontend skills using React + Redux while learning Typescript on the way. If you want to learn more about how I have been planning this project from scratch, you can read the My Journey file.
Frontend:
- React for the UI
- Redux for state management
- Typescript for type checking
[ IN PROGRESS ]
For the backend information, you can check the Magno Ferreira's event-planner-service repository.
- Frontend: Marina Costa
- Backend: Magno Ferreira
- I built a React/Redux front end for the application using the Create React App to bootstrap the project.
There are 4 types of objects stored in the database:
- User
- Event
- Subject
- Task
- User object includes:
| Attribute | Type | Description |
|---|---|---|
| id | String | The user’s unique identifier |
| name | String | The user’s name |
| String | The user’s e-email address |
- Event object includes:
| Attribute | Type | Description |
|---|---|---|
| id | String | The event’s unique identifier |
| title | String | The event’s name |
| host | Object | Object containing the host id, name and email |
| subject | Object | Object containing the meal id, name, details (optional), the creator id and url of the meal photo (optional) |
| date | String | The date and time the event will take place in the format "14-05-2020 12:44:22" |
| createDate | String | The event's creation date and time in the format "14-05-2020 12:44:22" |
| address | String | The event’s location |
| maxNumberGuest | Number | The max number of guests for the event |
| tasks | Array | Array containing tasks objects, including id, details, eventId and owner id, who is responsible for the task |
| guestInEvents | Array | Array of guest objects, including id, name, email and status of the guests who registered for the event |
| totalCost | Number | The event's total cost |
| additionalInfo | String | Additional info (optional) |
| eventStatus | String | Status of the event: "Open" or "Close" |
| pricePerGuest | Number | The cost per guest |
- Subject object includes:
| Attribute | Type | Description |
|---|---|---|
| id | String | The subject’s unique identifier |
| name | String | The subject’s name |
| imageUrl | FileList | Image url (optional) |
| detail | String | Additional info (optional) |
| createdBy | String | Creator id |
- Subject object includes:
| Attribute | Type | Description |
|---|---|---|
| id | String | The task’s unique identifier |
| eventId | String | Event id |
| details | String | Additional info (optional) |
| owner | String | Owner id |
[ SERVICES NEED UPDATE ] My code talks to the database via the methods listed bellow:
USER METHODS
getUser(userId)getUsers()
EVENT METHODS
getEvent(eventId)getEvents(userId)createEvent(eventInput)subscribeToEvent(guestId, eventId)acceptGuestInEvent(guestId, status)
SUBJECT METHODS
getSubject(subjectId)getSubjects(userId)createSubject(subjectInput)
TASK METHODS
getTask(taskId)getTasks(userId)createTask(taskInput)subscribeToTask(ownerId, eventId)[ ADD TASK METHODS ]
getUser(userId)Method
Description: Get the user based on the user id.
Return Value: User object with the following properties: id, name and email of the user.
getUsers()Method
Description: Get all of the existing users from the database.
Return Value: Paginated object where there is a property called items with an array of User objects as value. It also has currentPage and totalPages properties.
getEvent(eventId)Method
Description: Get all an specific event based on the event id.
Return Value: Event object including the following properties: id, title, host, subject, date, createDate, address, maxNumberGuest, tasks, guestInEvents, totalCost, additionalInfo, eventStatus and pricePerGuest.
getEvents(userId)Method
Description: Get all events for an specific user.
Return Value: Paginated object where there is a property called items with an array of Event objects as value. It also has currentPage and totalPages properties.
createEvent(eventInput)Method
Description: Create a new event and store it on the database.
Parameters: Object that includes the following properties: title, host, subject, additionalInfo, address, date, total_cost, maxNumberGuest. More details about these properties:
| Attribute | Type | Description |
|---|---|---|
| title | String | The event’s name |
| subject | string | Subject id |
| additionalInfo | String | Additional info (optional) |
| address | String | The event’s location |
| date | Date | The event's date and time in the format "14-05-2020 12:44:22" |
| totalCost | Number | The event's total cost |
| maxNumberGuest | Number | The max number of guests the event can support |
| tasks | Array | Array containing task objects including only the details (optional) |
Return Value: The created event id.
subscribeToEvent(guestId, eventId)Method
Description: Add a guest to a particular event in the database, by adding the guest object to the guestInEvents array inside the Event object. The guest object includes and id, name, email and status for the guest, which starts as 'pending' and can be changed by the host to 'approved'.
Parameters: The event id and the guest id is the authed user id. More details about these properties:
Return Value: This method doesn't return anything.
acceptGuestInEvent(guestId, status)Method
Description: Update the guest status for a particular event and guest object in the Event object.
Parameters: The guest id and the new status approved.
Return Value: This method doesn't return anything.
getSubject(subjectId)
Description: Get the subejct based on the subject id.
Return Value: Subject object with the following properties: id, name, imageUrl (optional), detail (optional) and createdBy with the creator id.
getSubjects(userId)
Description: Get all subjects for an specific user.
Return Value: Paginated object where there is a property called items with an array of Subject objects as value. It also has currentPage and totalPages properties.
createSubject(subjectInput)
Description: Create a new subject and store it on the database.
Parameters: Object that includes the following properties: name, imageUrl (optional) and detail (optional). More details about these properties:
| Attribute | Type | Description |
|---|---|---|
| name | String | The subject's name |
| imageUrl | FileList | Image url |
| detail | String | Additional info (optional) |
Return Value: The created subject id.
- Download the files, cd into root directory and run:
# Install dependencies
$ npm install
# Run the app
$ npm start[ ADD INSTRUCTIONS ON HOW TO RUN IT WITH THE BACKEND ]
-
This project was bootstrapped with Create React App.
-
Centralized Error Handling with React and Redux by Manujith Pallewatte
-
Custom hook for persistent state: Using React Hooks with canvas by Koen van Gilst
-
Style Tile creation: 4 - Design & Code a Responsive Landing Page from Start to Finish by Jesse Showalter
-
React + Redux - User Registration and Login Tutorial & Example by Jason Watmore
-
React 16+ Single and Multiple Images Upload Preview by Digamber
| Image or icon | Author | Source |
|---|---|---|
 |
Oksana Latysheva | Noun Project |
 |
Edgar Castrejon | Unsplash |
 |
Spencer Davis | Unsplash |
 |
Kelsey Chance | Unsplash |