Zero to App
This page holds all the videos that are part of this project!
All the videos are hosted on YouTube as unlisted, not publicly available. Only you can see them!
From Zero to App. Episode 34: final episode! (7 minutes)
In this video I wrap up the course! Thank you so much for following it!
From Zero to App. Episode 33: deployment! (53 minutes)
In this video I finally deploy the application using Heroku and Netlify! 🚀
From Zero to App. Episode 32: adding custom service worker (but failed!) (45 minutes)
In this video I started to reason on how to make the app work offline. I enabled the default Create-React-App service worker to make the app display even when offline, and I started to work on the custom service worker to intercept the GraphQL fetch requests and hijack them to IndexedDB calls, to then sync the activities added locally when the app is back online.
But I failed and run into issues, related to both how Create-React-App handles custom service workers and also I realized I needed much more time to properly implement all I wanted to do. So since the videos end in 2 days I decided to scratch this part. I included the video because it might still be valuable but just be aware that I could not do what I wanted, and I finally reverted the code to what it was at the start of the video.
That’s the good thing of a live process, not everything we want to do might turn out as expected!
From Zero to App. Episode 31: add users to the mix && login process! (54 minutes)
In this video I work on the login and registration process, adding users to the database and using that to log in them. Then I use the logged in user credentials to filter the activities and only return to the client the activities they entered!
From Zero to App. Episode 30: GraphQL Mutation and Database! (57 minutes)
In this video I perform the GraphQL mutation to add a new activity to the server, and I initialize a PostgreSQL database where we store it!
From Zero to App. Episode 29: HttpOnly cookies! (21 minutes)
In this episode I move the JWT token to an HttpOnly cookie!
From Zero to App. Episode 28: the GraphQL API server! (66 minutes)
In this episode I create the GraphQL server and I start using the GraphQL API to fetch the activities list
From Zero to App. Episode 27: Backend, user registration and JWT token! (53 minutes)
In this episode we create the backend using Express, and we handle the user registration form. We finally send back to the user, now authenticated, the JWT token to create (future) GraphQL requests
From Zero to App. Episode 26: Registration Form! (19 minutes)
In this video I add a registration form for our users!
From Zero to App. Episode 25: Routing! (29 minutes)
In this episode I add Reach Router to the application, and at the end we’ll have cool URLs! Learn more about it on https://reach.tech/router
From Zero to App. Episode 24: Geolocation API, more work on CSS! (29 minutes)
In this video I get the initial location for a new activity using the Geolocation API, I improve the responsive layout for the activity form, I disable selecting the text that appears on the app interface, and finally I fight with a bug with the map.
From Zero to App. Episode 23: make sure the activity has a title, confirm to delete activities, empty state, little redesign! (28 minutes)
In this video I make sure the activity has a title before saving it, I add a confirmation dialog box before I delete an activity, I add an empty state after I delete an activity, and I make a little bit of redesign!
From Zero to App. Episode 22: delete activities and more! (46 minutes)
In this video I fix a linting error that appeared when I added an emoji in the app, I make the app automatically reload the activities from IndexedDB when I add a new activity, I fix an error I detected when saving the activities, and I added the ability to delete existing activities!
From Zero to App. Episode 21: sanitize HTML and much more! (31 minutes)
In this video I fix the editor height, sanitize the activity description HTML, refactor the App.css file moving all the styling of the homepage to Emotion and I also add a back button in the activity form!
Day 20: Activity description editor, and redesign of the new activity form (41 minutes)
In this video I first research a bit the options I have for the editor, I choose one library and I add it to the form. I make it save the description, and then I go on to rework the form because it’s ugly.
Day 19: Dates, times and correct order of activities (21 minutes)
In this video I first add the time, well formatted, into the activity detail. Then I add the dates to the activities list, and finally I correctly sorting the activities by date
Day 18: the Activity Date and Time (34 minutes)
In this video I add the date (and time) picker to the new activity form, and I display it in the activity detail.
Day 17: display the Activity Map in the activity details page (36 minutes)
In this video I show the map in the activity detail page!
Day 16: the Activity Map (43 minutes)
In this video I add the map feature to the “Save Activity” view, and clicking on the map stores the new location in the activity!
Day 15: Add new activity from list (22 minutes)
In this video I solve an issue in the mobile view I noticed, and then I add a new button the activities list to add a new activity. Finally I make the “add new activity” button bring back to the activities list.
Day 14: Recap and what’s next! (5 minutes)
In this video I recap all the work I’ve done so far, and then I plan the work I need to do from now on.
Day 13: the Activity Detail view, + Refactoring (17 minutes)
In this video I work on the Detail view, showing the details of the activity on the right side of the page. Then I refactor a little bit the components tree, as I got a huge Activity component and I want to have multiple smaller components instead.
Day 12: adding CSS and making the list view (36 minutes)
In this video I learn the CSS-in-JS library Emotion live while using it, struggle to create a layout with lots of trial and error, finally get to a working state until I get tripped up by a semicolon in CSS!
Day 11: list activities (17 minutes)
In this video I list the activities stored into the in-browser IndexedDB database!
Day 10: saving activities (18 minutes)
In this video I store the activity into IndexedDB!
Day 9: homepage and user onboarding (35 minutes)
In this video I create the homepage, and I start the user onboarding process with the “add activity” form, all in React!
Day 8: create-react-app (11 minutes)
In this video I start the coding phase, starting with a setup of the project with create-react-app!
Day 7: Name, domain, logo and landing page mockup (24 minutes)
In this video I share the process I used to determine the app name, the domain, how I made the logo and then a mockup of the landing page!
Day 6: User onboarding (9 minutes)
In this video I define the user onboarding process, then I use Balsamiq Mockups to draw how this process should look like.
Day 5: Mobile Mockups (9 minutes)
In this video I use Balsamiq Mockups to draw the mobile friendly mockups of the app. We adapt the desktop version of the app to look great on mobile.
Day 4: Desktop Mockups (15 minutes)
In this video I use Balsamiq Mockups to draw the first mockup of the app. The desktop version.
Day 3: Building a mind map (11 minutes)
In this video I use a Mind Map app to reason about some of the topics of the app. Key concepts, and the tech we’re going to use!
Day 2: Bringing the app idea to paper (15 minutes)
In this video I start defining the app idea, and I write the first screens I have in mind on paper.
Day 1: Introduction to the project (3 minutes)
In this video I introduce you to how the project will be organized, and what thing we are going to build, the process I will follow.