7 Days Of Code - React Native

Plan and build the entire app in 7 days! Use Javascript and React (React Native) to achieve that. No 3rd party dep used.

What you'll learn

Use React Native to create mobile apps fast

Learn to plan the application from an idea to the complete product

Improve coding skills in the mobile development

Develop strong problem-solving skills for real-world scenarios

Requirements

Javascript or other OOP language basics needed!

Description

What is React Native?React Native is an open-source framework by Facebook for building cross-platform mobile apps using JavaScript and React. It allows developers to use a single codebase to create native-like experiences on iOS and Android, making it efficient and cost-effective.What application will you create?Activity tracker application. A user can create, manage, and track activities.Is this course right for me?Yes, If you want to learn how to set goals and create the entire app in 7 days. Also, it would be best if you had an understanding of Javascript or React JS. This course is not for complete beginners.Day 1: Setting Up and Adding Animations On the first day, we'll build our app layout using React Native. We'll focus on making it look good and add animations to activate and deactivate activities. By the end of the day, you'll have a visually appealing foundation for your mobile app.Day 2: Making Things Work and Saving ProgressDay two is about making the app do things – activating and deactivating activities. We'll also learn to save our work, so even if we close the app, it remembers what we did. This ensures a seamless experience for users who want to pick up where they left off.Day 3: Keeping Track of Time On the third day, we'll learn how to track time in our app. We'll use a simple method to measure how long we spend on each activity, providing valuable insights into time management for users.Day 4: Adding New Activities Day four is all about adding new activities to our app. We'll create a way for users to put in information about a new activity, and it will show up in the app. This enhances the app's versatility, allowing users to customize their experience.Day 5: More Details about Activities On the fifth day, we'll make a page that shows more details about an activity when you tap on it. You can also delete activities from this page. This ensures users have a comprehensive view of their activities and the ability to manage them easily.Day 6: Editing and Deleting Activities Day six focuses on making our app better. We'll add a way to edit activity details and confirm if you want to delete an activity. This additional functionality enhances the user's control and interaction with the app.Day 7: Wrapping Up with a Tutorial The last day is a big one! We'll create a tutorial to show people how to use our app in three simple steps: starting activities, stopping them, and checking the details. This tutorial not only concludes our course but equips users with a clear understanding of how to navigate and maximize the app's features.

Overview

Section 1: Introduction

Lecture 1 Preview

Lecture 2 Requirements

Lecture 3 How to approach the Lectures

Lecture 4 Planning

Lecture 5 Planning Addition

Section 2: Day 1 - App Layout

Lecture 6 Introduction

Lecture 7 Setup Project

Lecture 8 Activity item and timer

Lecture 9 Home screen

Lecture 10 Data and Flat list

Lecture 11 Place the content to the top

Lecture 12 Add variables and container padding

Lecture 13 Override Text

Lecture 14 Highlight View

Lecture 15 Row and more stylings

Lecture 16 Timer color and Status Panel

Lecture 17 Pan handler Animation

Lecture 18 Spring to original position

Section 3: Day 2 - Activation

Lecture 19 Introduction

Lecture 20 Monitor gesture state

Lecture 21 Activation callback

Lecture 22 Async storage

Lecture 23 Check if storage enabled

Lecture 24 Activate item

Lecture 25 Visual activation change

Lecture 26 One activation at the time

Lecture 27 Save data to storage

Lecture 28 Loading dots animation

Lecture 29 Loading dots improvements

Section 4: Day 3 - Timer

Lecture 30 Introduction

Lecture 31 Tick function

Lecture 32 Accumulate time

Lecture 33 Stop timer

Lecture 34 Check for previous item

Lecture 35 Display timer

Lecture 36 Store updated time

Lecture 37 UX Improvements

Lecture 38 Handle browser refresh

Lecture 39 Handle mobile device saving

Section 5: Day 4 - Item Create

Lecture 40 Introduction

Lecture 41 Flow Modal

Lecture 42 Add input to modal

Lecture 43 Reusable button

Lecture 44 Get new item data

Lecture 45 Display error and disable button

Lecture 46 Close and show the modal

Lecture 47 Add new item

Lecture 48 Max width of container

Lecture 49 Add button icon

Lecture 50 Disable scroll

Section 6: Day 5 - Item Detail

Lecture 51 Introduction

Lecture 52 Item detail screen

Lecture 53 Full screen modal

Lecture 54 Detail screen layout

Lecture 55 Handle double click

Lecture 56 Set focused item

Lecture 57 Pass time into detail

Lecture 58 Delete Button Style

Section 7: Day 6 - Item Update/Delete

Lecture 59 Introduction

Lecture 60 Editing Mode

Lecture 61 Item edit works

Lecture 62 Fix button position

Lecture 63 Prompt modal

Lecture 64 Prompt handler functions

Lecture 65 Delete works

Lecture 66 Display current date

Section 8: Day 7 - Tutorial and Wrap-up

Lecture 67 Introduction

Lecture 68 Tutorial Screen

Lecture 69 Stepping

Lecture 70 Preview Item

Lecture 71 Swiping right

Lecture 72 Animation restart

Lecture 73 Handle step 2

Lecture 74 Preview item activity

Lecture 75 Timeout to restart state

Lecture 76 Step 3 Double tap

Lecture 77 Disable controls

Lecture 78 Hide tutorial

Lecture 79 Store watch status to storage

Lecture 80 Recap & Course End

Anybody interested in how to build an app in 7 days.,People looking for a practical development guide,This course is for everyone eager to understand how to build an app from scratch