For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Machine Learning Engineering (16 weeks)
Full-Stack Software Developer
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
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