Requirements for Submissions:
- Github Repo link for each project
- Deployed link for each project
Where to Submit: https://forms.gle/Cm9hpbEMESxmh3bC7
Project 1: Build an Expense Tracker App using React Hooks and Context API
Project 2: COVID-19 Tracker App
Project 4A: Red Queen's Race with Web Animation API and React Hooks
Project 4B: Develop Tiny Short Animation with React Hooks
Project 6: Quiz App with React and TypeScript
Project 7: Build a React Timer App using TypeScript with Test Driven Development
Project 9A: Create a Shopping Basket using React and Redux Toolkit with TypeScript
Project 9B: Building Diaries App using React and Redux Toolkit with TypeScript
Project 10: Build Slack App with Nextjs and Firebase
Follow this Video and build the App: Expense Tracker
You will use React, React Material UI, Chart.js, and React Suspense to build this COVID-19 Tracker React App
- Watch this video as a example for the app but build your own app don't just copy it:
Example COVID-19 Tracker App Demo
- Choose one or more COVID-19 API's that you are going to use:
- Start building your COVID-19 Tracker App
Your code should be hosted in a GitHub Repo from the beginning with GitHub CI/CD Actions and hosted on Surge/Netlify.
Now build a Shoe Store after watching this video
Review the code and demo and improve and build your own Red Queens Race Animation with React Hooks.
Note the following:
- When Alice drinks from the bottle, she grows smaller.
- Because small children tire out easily, unlike automaton chess pieces, Alice is constantly slowing down.
- But urging them on by clicking or tapping causes them to speed up.
- The background elements also have playback rates that are impacted when you click or tap.
Read this article: The Tiny Short Animation Trend in Web Design
Clone the front page animation of one of the companies mentioned in the article, using the latest web animation API.
Bonus/Extra Project 5: Build an Animated React Website which follows the Latest Trends like Animated Illustrations
"Our eyes are hardwired to notice movement. Historically, it’s helped to keep us alive. And, in 2020, web designers are capitalizing on this default human setting. Animated illustrations are one of the newest trends being used to direct viewer attention within web designs. You’ll see these petite animations on sites all over the web. Some animated illustrations are merely still graphics that jiggle, while other illustrated animations are more thoughtful and complex. When used to their fullest capacity, animated illustrations can tell stories, explain concepts, or help viewers navigate a website." The 8 Biggest Web Design Trends of 2020
20 Extraordinary Web Design Ideas That Will Get Everyone Clicking Incorporating illustration on a website has been a trend for a few years. However, designers are now focusing to create custom and 3D illustrations to define a brand. An illustration can empower a brand if blended well with minimalism. See how the brand Neat has rightly executed this trend:
To intrigue viewers, brands like Pitch have introduced 3D illustration design: Pitch Website
In this project you will build a animated React Website, all animations must use the latest Web Animations API and latest trends.
Resources:
Design Resources for Developers
You can use the ideas form these resourses or develop your own ideas:
Best websites that use Illustration and Animation
22 Websites with Impressive Illustrations and Animations
10 Inspiring Websites with Gorgeous Animations
Best Website examples of designs with animation
You may use AI to generate graphics:
Creative Tools to Generate AI Art
Quiz app using React and TypeScript
You can take help from here also: Your First React Typescript Project: a Todo List App
Sketch-RNN-JS: A Generative Model for Vector Drawings
React Test-driven Development: From User Stories to Production
Follow this for TypeScript config:
Create react app typescript: testing with jest and enzyme
Note 1: While Building the CI/CD pipeline make sure the app passes all the automated tests before deployment
Note 2: In the Toptal article above they donot use TypeScipt, but you are required to do so.
Project 8: Build a Build a Space X Client Application with React, TypeScript, Appllo Client 3, and SpaceX API using Test-Driven Development (TDD) and deployed as a PWA
Build a GraphQL + React app with TypeScript
You are required to build your own App not just copy the Demo Apps.
Note: You can generate the TypeScript code automatically by using the Code Generator.
Create a shopping basket using React and Redux Toolkit
In this project we will be learning to use Redux by building an app that lets users create and manage diaries. We will be building our application using React, and we’ll set up Mirage as our API mocking server since we have not yet learned to build API's.
We will follow this Tutorial: Setting Up Redux For Use In A Real-World Application
Note: In the project React Router v5 is being used we recommend that you use latest React Router version in your project.
This Project is very important because up to now we have been doing small projects which focused on only focused limited functionality. Project 9B is the first real-world professional project. In the real-world, we will be doing these kinds of projects. Therefore, give special attention to it.
Allow users to register, login, create channels, add members and chat.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
