Technologies: HTML, CSS, JS, React, React Hooks, React Router and React Context API.
👆This project is optimized for groups of 2 or max 3 students.
Hello! It is time to begin creating professional front-end applications. This time we will be building a small Meetup.com clone that allows users to Browse and RSVP events, very similar to how Meetup.com works.
First we want to focus on the visuals, make sure the viewable structures are working correctly. Secondly, we should implement dynamic data display.
Each group must create the following views:
Each Group entity must have
Each Event Entity must have
After you finish your wireframes, get to coding. Please make sure to only use functional components and if you need to define state variables or do something during the component lifecycle, use the corresponding hooks. (
Note: Think DRY (Don't repeat yourself) and declare only one component and use
props to handle similar structure but different content. Context should be used only when you need to share data between many views. Always use props when you can and context sparingly.
REMEMBER: Anchor tags will cause a redirect, which you don't want in React. Be sure to import and use the
Link component from React Router to implement the navigation between views.
React context is built into the flux boilerplate. If you are having trouble understanding how context works, please take a look at the demo component that comes with it. (In your views folder)
Use the store to fill the dummy content within the views/components. The store is accessible using the
store structure (
Below, you will find an example of the date for the Meetup clone. This consists of 2 arrays (events and meetups) and an abject for the user session.
You can replace your current store object with this data and even expand it to add more events and groups. Remember that this is placeholder data for now. Later on, we will be using fetch to pull the data in from an API.
In order to have access to the global data from your store in one of your components, you must import the Context. See the example below.
All of your Fetch/AJAX calls should be in the
useEffect() section of the
appContext.js file. Due to the way the boilerplate is built, this area handles the calls that are done only at the initial load of your application.
Do not clone this repository.
a) If using Gitpod (recomendada) you can clone the boilerplate by clicking here.
b) If working locally type the following command from your command line:
💡 Important: Remember to create a new repository, update the remote (
git remote set-url origin <your new url>), and upload the code to your new repository using
Install the dependencies
$ npm install.
Run the WebPack development
$ npm run start.
That's it! Time to code.
"The scariest moment is always before you start" Stephen King
All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.