├── LICENSE ├── README.md ├── project00_expense_traker └── readme.md ├── project01_covid_tracker └── readme.md ├── project02_shoe_store └── readme.md ├── project03_spacex_client └── readme.md ├── project04_shopping_basket └── readme.md ├── project05_diaries └── readme.md ├── project06_todo └── readme.md ├── project07_blog └── readme.md ├── project08_forum └── readme.md └── project09_grocery_list └── readme.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Panacloud Multi-Cloud Internet-Scale Modern Global Apps 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Learning Project for Next.js 2 | 3 | [The repo is part of the Certified Web 3 and Metaverse Developer Program](https://www.panaverse.co/) 4 | 5 | [Next.js Learning Repo](https://github.com/panacloud-modern-global-apps/nextjs) 6 | 7 | [Learning Projects for Chakra UI with Next.js](https://github.com/panacloud-modern-global-apps/chakra-nextjs-projects) 8 | -------------------------------------------------------------------------------- /project00_expense_traker/readme.md: -------------------------------------------------------------------------------- 1 | # Expense Tracker App using Next.js 2 | 3 | This [Expense Tracker App is in React], you are required to port this application and build it using Next.js and Chakra UI. 4 | 5 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 6 | 7 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). 8 | 9 | React Learning Resources: 10 | 11 | [YouTube English Video : Building a React Project](https://www.youtube.com/watch?v=q6GmIxnflfM) 12 | 13 | [Facebook English Video : Building a React Project](https://www.facebook.com/piaic.main/videos/177715090441777/) 14 | 15 | [Facebook Urdu Video : Building a React Project](https://www.facebook.com/imran82ali/videos/283949636075779/) 16 | 17 | [YouTube Urdu Video : Building a React Project](https://www.youtube.com/watch?v=dkMba8oK55w) 18 | 19 | Expense Tracker App in React By Adil Altaf 20 | 21 | [Git Repo URL](https://github.com/adil-innovation-lab/react-expense-tracker) 22 | 23 | [Surge URL](http://react-expense-tracker-adil.surge.sh/) 24 | 25 | [Step by Step Guide](https://docs.google.com/document/d/1f6KBYJQAhwUzS0UtMzrshBWwOeYHH32kMAfuLIfuDgU/edit?usp=sharing) -------------------------------------------------------------------------------- /project01_covid_tracker/readme.md: -------------------------------------------------------------------------------- 1 | # COVID-19 Tracker App 2 | 3 | You will use Next.js, Chart.js, and Chakra UI to build this COVID-19 Tracker App 4 | 5 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 6 | 7 | Watch this video as a example for the React app but build your own app using Next.js don't just copy it: 8 | 9 | [Example COVID-19 React Tracker App Demo](https://www.youtube.com/watch?v=khJlrj3Y6Ls) 10 | 11 | Choose one or more COVID-19 API's that you are going to use: 12 | 13 | [COVID-19 API Listing 1](https://rapidapi.com/collection/coronavirus-covid-19) 14 | 15 | [COVID-19 API Listing 2](https://covid-19-apis.postman.com/) 16 | 17 | [COVID-19 API Listing 3](https://dataconomy.com/2020/04/apis-to-track-coronavirus-covid-19/) 18 | 19 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). 20 | 21 | Adil Altaf builds the COVID-19 React Tracker App 22 | 23 | [English Facebook Video : Building COVID-19 Tracker App](https://www.facebook.com/zeeshanhanif/videos/10223727984452482/) 24 | 25 | [English YouTube Video : Building COVID-19 Tracker App](https://www.youtube.com/watch?v=_JcQ5ISu2PQ&lc) 26 | 27 | [Urdu Facebook Video : Building COVID-19 Tracker App](https://www.facebook.com/zeeshanhanif/videos/10223743572722179/) 28 | 29 | [Urdu YouTube Video : Building COVID-19 Tracker App](https://www.youtube.com/watch?v=hbVAt-44G9Y) 30 | -------------------------------------------------------------------------------- /project02_shoe_store/readme.md: -------------------------------------------------------------------------------- 1 | # Shoe Store 2 | 3 | Now build a Shoe Store using Next.js and Chakra UI after watching this [video](https://www.youtube.com/watch?v=4NpGzBEySvI). 4 | 5 | In the video they made a Shoe Store using React and React Router, however we will build it using only Next.js 6 | 7 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 8 | 9 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). 10 | -------------------------------------------------------------------------------- /project03_spacex_client/readme.md: -------------------------------------------------------------------------------- 1 | ### Space X Client Application with Next.js, TypeScript, Chakra UI, Appllo Client, and SpaceX API using Test-Driven Development (TDD) and deployed as a PWA 2 | 3 | [Watch first 7 mins of video](https://www.youtube.com/watch?v=7wzR4Ig5pTI) 4 | 5 | [Space X API](http://api.spacex.land/graphql/) 6 | 7 | [Example of a Demo App](https://github.com/imranhsayed/graphql-react-app/blob/master/GraphQl-SpaceX-Demo.gif) 8 | 9 | [Why use Next.js with Apollo](https://blog.logrocket.com/why-use-next-js-apollo/) 10 | 11 | [Build a GraphQL + Next.js app with TypeScript](https://www.apollographql.com/blog/apollo-client/next-js/next-js-getting-started/) 12 | 13 | [Configuring and using the Apollo client in a Next.js TypeScript application](https://javascript.plainenglish.io/configuring-and-using-the-apollo-client-in-a-next-js-typescript-application-9de6b2258943) 14 | 15 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 16 | 17 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). 18 | 19 | You are required to build your own App not just copy the Demo Apps. 20 | 21 | [English Facebook Video : Building A project With React, TypeScript And GraphQL](https://www.facebook.com/zeeshanhanif/videos/10224252222558107/) 22 | 23 | [English YouTube Video : Building A project With React, TypeScript And GraphQL](https://www.youtube.com/watch?v=gavh9cTxGWI) 24 | 25 | [Urdu Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224260317480475/) 26 | 27 | [English Facebook Video](https://www.youtube.com/watch?v=oVn0oXOdS58) -------------------------------------------------------------------------------- /project04_shopping_basket/readme.md: -------------------------------------------------------------------------------- 1 | # Shopping Basket using Next and Redux Toolkit with TypeScript 2 | 3 | Shopping cart using Next.js and Redux Toolkit. Styled with Chakra UI. 4 | 5 | [Create a shopping basket using React and Redux Toolkit Demo](https://next-redux-shopping-cart.vercel.app/) 6 | 7 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 8 | 9 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). -------------------------------------------------------------------------------- /project05_diaries/readme.md: -------------------------------------------------------------------------------- 1 | ### Diaries Full Stack App using Next.js and Redux Toolkit with TypeScript 2 | 3 | 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 Next.js, Chakra UI and we’ll set up our own API using Next.js not use Mirage as shown in the following project: 4 | 5 | [We will follow this Tutorial to define the requirements](https://www.smashingmagazine.com/2020/08/redux-real-world-application/) 6 | 7 | In the project we will use Prisma to connect to the Database in the APIs. 8 | 9 | We will use two versions of the project one using [MongoDB Atlas](https://www.mongodb.com/atlas/database) and the other [Cockroach DB](https://www.cockroachlabs.com/get-started-cockroachdb/). Both versions will be using Prisma. 10 | 11 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 12 | 13 | Deploy both the versions on Vercel. 14 | 15 | This Project is very important because up to now we have been doing small projects which focused on only focused limited functionality. This project is the first real-world professional full stack project. In the real-world, we will be doing these kinds of projects. Therefore, give special attention to it. -------------------------------------------------------------------------------- /project06_todo/readme.md: -------------------------------------------------------------------------------- 1 | # Todo App with Next, Chakra UI, TypeScript and Strapi 2 | 3 | Review this [tutorial](https://strapi.io/blog/how-to-build-a-to-do-app-using-next-js-and-strapi-1) to define the requirements. 4 | 5 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 6 | 7 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). -------------------------------------------------------------------------------- /project07_blog/readme.md: -------------------------------------------------------------------------------- 1 | # Blog with Next, Chakra UI, TypeScript and Strapi 2 | 3 | Review this [tutorial](https://strapi.io/blog/build-a-blog-with-next-react-js-strapi) to define the requirements. 4 | 5 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 6 | 7 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). -------------------------------------------------------------------------------- /project08_forum/readme.md: -------------------------------------------------------------------------------- 1 | # Forum with Next, Chakra UI, TypeScript and Strapi 2 | 3 | Review this [tutorial](https://strapi.io/blog/how-to-build-a-forum-app-with-next-js-and-strapi-cms) to define the requirements. 4 | 5 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 6 | 7 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). -------------------------------------------------------------------------------- /project09_grocery_list/readme.md: -------------------------------------------------------------------------------- 1 | # Full Stack Grocery List with Next, Chakra UI, TypeScript, tRPC and Prisma ORM 2 | 3 | Review this [tutorial](https://dev.to/franciscomendes10866/build-a-full-stack-app-with-nextjs-tailwind-trpc-and-prisma-orm-4ail) to define the requirements. 4 | 5 | You may use any serverless database of your choice with Prisma ORM. 6 | 7 | The app must be [mobile-first and responsive](https://chakra-ui.com/docs/styled-system/responsive-styles). 8 | 9 | When the project is complete deploy it on [Vercel](https://vercel.com/docs/concepts/deployments/overview). --------------------------------------------------------------------------------