Full-Stack Mobile App with React Native, Redux, Django & AWS

Name: Full-Stack Mobile App with React Native, Redux, Django & AWS
Rating: 4.2 (35 reviews)

Learn React Native, Django, Tailwind CSS, Redux, REST API, Modals, React Navigation, Toast Notifications, EmailJs, S3

Created byWilfried Bertrand Wetta

Last updated 1/2024

English

English [Auto],

What you'll learn

Basics of React Native
Expo
React Navigation
Bottom tabs
Redux
Tailwind CSS
Animated Modals
Custom Fonts
Async Storage
Emailing from an application
Django
Django REST API
AWS S3

Course content

11 sections • 41 lectures • 9h 22m total length

Introduction6:11
Project creation and NativeWind setup6:45
Create a front-end expo app named electro mart, set up nativewind tailwind for react native, configure tailwind.config, and prepare a src folder with app.js, testing with expo go.
Navigation and Bottom Tab Navigator Setup15:24
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/native-stack @react-navigation/native @react-navigation/bottom-tabs

Icons and Style for Bottom Tab Navigator8:26
Style the tab navigator with expo vector icons for home, favorite and cart icons based on route.name, applying ash 4 by 5 6 3 background radii 30 and white tint.
Search Bar and Categories25:02
Learn to implement a search bar and category selector on the home screen of a React Native app, with safe area view, category state, and a mock product list.
Display Products and Search Functionality28:26
HomeScreen Fixes4:20
Navigation to ProductDetailsScreen with Parameters10:10
Showing Product Details to the Screen17:53

Shopping Cart Design and Displaying Cart Gif14:53
Display Shopping Cart Items12:24
Updating Quantity and Total Price17:25
Update item quantities and the total price in a React Native cart by dispatching update actions from a basket slice, handling plus and minus clicks to reflect price changes.
Fixing Item Already in Cart and Quantity Below 15:07
Modal and Animation27:43
Removing Items from Redux Store and Fixing Items Already Added11:32
Fixing Modal and Installing EmailJs11:43
Completing EmailJs and Receiving Mails23:14
Clearing the Cart Upon Placing an Order2:39
Reset the basket by clearing items to an empty array and the total price to zero, then dispatch the clear basket action after a successful order placement.

Setting up the Backend Environment and Installing Django16:04
Install python and add it to your path, create and activate a virtual environment, then install Django and Django Rest Framework, migrate, and run the server to access admin.
Registering Apps and Creating Models17:22
Configuration to Store Static Files8:33
Configure Django static and media files, set media URL and route, update urls.py, install pillow, run migrations, and test image uploads to the product folder.
Switching to Postgres and Adding Items to the Database14:00
Setting Up API Routes and Listing Products and Categories15:31

Deploy Django App on Render16:45
Deploy a django app on render using gunicorn as the wsgi server, manage dependencies with a virtual environment and requirements.txt, and enable white noise for css styling.
Fixing Environment Variables on Render2:15
Deploy Postgres Database on Render and Restore Data through PgAdmin17:20
Learn to deploy a Postgres database on Render, configure Django to connect via dj-database-url, migrate data, and restore data through PgAdmin to a remote Render database.
Installing Eas and Generating the APK16:01
Switch the fetch to the render API, update app.json splash and adaptive icon, and build the Android apk via Expo EAS for testing.
Fixing Last Bugs and re-Generating the APK12:57
Fixes a type mismatch by converting price from string to number using parsefloat. Updates the cart and order flows and validates apk build and deployment.

Requirements

No programming experience is needed
Having web programming knowledge would be an advantage
Knowing the basics of python would be an advantage

Description

Welcome to the ultimate hands-on course on building and deploying the captivating ElectroMart mobile application using React Native, Django, and AWS S3. Join us on this exciting journey where you'll learn cutting-edge technologies and gain practical skills to create a feature-rich, fully functional e-commerce app from scratch.

What you'll learn:

Master React Native: Dive into the world of React Native and harness its power to build stunning cross-platform mobile applications. Gain expertise in component-based architecture, UI design, and responsive layouts. Explore the usage of custom fonts, native storage, and seamlessly integrate AWS S3 for efficient image storage.
Backend Development with Django: Discover the versatility of Django, a powerful Python-based web framework, as you build the robust backend for ElectroMart. Create models, APIs, and authentication systems to enable seamless communication between the frontend and backend.
AWS S3 Integration: Harness the power of AWS S3 to efficiently store and retrieve images for your ElectroMart app. Learn how to seamlessly integrate ElectroMart with AWS S3, utilizing its secure and scalable infrastructure for reliable image storage.
Deployment and Distribution: Master the art of deploying your app using Render, a cloud platform designed for simplicity and scalability. Learn to generate APKs through EAS (Expo Application Services) and distribute your app to a global audience.
Frontend Functionality: Explore advanced frontend techniques such as sending emails using EmailJS, managing app state with Redux, and implementing toast notifications for an enhanced user experience. Leverage the Bottom Tab Navigator to create a smooth and intuitive app navigation system.
Styling with NativeWind: Utilize the power of NativeWind (React Native's Tailwind equivalent) to effortlessly style your ElectroMart app. Learn responsive design principles, create attractive UI components, and customize the app's appearance with ease.
State Management with Redux: Gain hands-on experience with Redux, a powerful state management library, to efficiently manage the app's data flow. Learn to handle complex app states and implement advanced features with ease.
User Experience Optimization: Discover techniques to improve user experience through modals, form validation, and error handling. Implement smooth animations and transitions to create an immersive and delightful user interface.

By the end of this course, you'll have the skills and knowledge to build and deploy a fully functional e-commerce app using React Native, Django, and AWS S3. Unleash your creativity, launch your career as a full-stack app developer, and set yourself apart in the rapidly growing mobile app market.

Don't miss this opportunity to become an expert in app development. Enroll now and unlock the potential of ElectroMart as you embark on an exciting journey into the world of React Native, Django, AWS S3, and beyond. Let's bring ElectroMart to life together!

Who this course is for:

Anybody who would want to learn mobile development both for Ios and Android with React Native
People that wish to take their skills to the next level using practical projects

Full-Stack Mobile App with React Native, Redux, Django & AWS

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 28min

Building Frontend6 lectures • 1hr 34min

Async Storage2 lectures • 42min

Redux2 lectures • 27min

Cart9 lectures • 2hr 7min

Placed Orders2 lectures • 32min

Fixes2 lectures • 17min

Django backend5 lectures • 1hr 12min

Backend x Frontend4 lectures • 58min

Production5 lectures • 1hr 5min

Requirements

Description

Who this course is for: