From 4f563c98e05d11976ac34f6946766ee6b243dbf6 Mon Sep 17 00:00:00 2001 From: Asma <148560934+asmasafdari@users.noreply.github.com> Date: Sun, 28 Jan 2024 08:04:05 -0800 Subject: [PATCH] Add files via upload --- Nextjs Mastery Challenge/Day1/readme.md | 8 ++++++++ Nextjs Mastery Challenge/Day10/readme.md | 8 ++++++++ Nextjs Mastery Challenge/Day11/readme.md | 8 ++++++++ Nextjs Mastery Challenge/Day12/readme.md | 8 ++++++++ Nextjs Mastery Challenge/Day13/readme.md | 8 ++++++++ Nextjs Mastery Challenge/Day2/readme.md | 6 ++++++ Nextjs Mastery Challenge/Day3/readme.md | 6 ++++++ Nextjs Mastery Challenge/Day4/readme.md | 7 +++++++ Nextjs Mastery Challenge/Day5/readme.md | 7 +++++++ Nextjs Mastery Challenge/Day6/readme.md | 7 +++++++ Nextjs Mastery Challenge/Day7/readme.md | 7 +++++++ Nextjs Mastery Challenge/Day8/readme.md | 8 ++++++++ Nextjs Mastery Challenge/Day9/readme.md | 7 +++++++ Nextjs Mastery Challenge/readme.md | 13 +++++++++++++ 14 files changed, 108 insertions(+) create mode 100644 Nextjs Mastery Challenge/Day1/readme.md create mode 100644 Nextjs Mastery Challenge/Day10/readme.md create mode 100644 Nextjs Mastery Challenge/Day11/readme.md create mode 100644 Nextjs Mastery Challenge/Day12/readme.md create mode 100644 Nextjs Mastery Challenge/Day13/readme.md create mode 100644 Nextjs Mastery Challenge/Day2/readme.md create mode 100644 Nextjs Mastery Challenge/Day3/readme.md create mode 100644 Nextjs Mastery Challenge/Day4/readme.md create mode 100644 Nextjs Mastery Challenge/Day5/readme.md create mode 100644 Nextjs Mastery Challenge/Day6/readme.md create mode 100644 Nextjs Mastery Challenge/Day7/readme.md create mode 100644 Nextjs Mastery Challenge/Day8/readme.md create mode 100644 Nextjs Mastery Challenge/Day9/readme.md create mode 100644 Nextjs Mastery Challenge/readme.md diff --git a/Nextjs Mastery Challenge/Day1/readme.md b/Nextjs Mastery Challenge/Day1/readme.md new file mode 100644 index 00000000..a0395733 --- /dev/null +++ b/Nextjs Mastery Challenge/Day1/readme.md @@ -0,0 +1,8 @@ +Day 1: Introduction to Next.js + +Topic for LinkedIn: What is Next.js and why is it useful for building web applications? + +Task: +Set up a new Next.js project using create-next-app. Create your first page with a headline: +What is Next.js and what are its benefits over traditional React applications? +Share your page on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day10/readme.md b/Nextjs Mastery Challenge/Day10/readme.md new file mode 100644 index 00000000..fc460163 --- /dev/null +++ b/Nextjs Mastery Challenge/Day10/readme.md @@ -0,0 +1,8 @@ +Day 10: Authentication + + +Topic for LinkedIn: What is authentication and why is it important? + + +Task: +Set up authentication in your Next.js project using the Clerk Auth Library. Share a screenshot of your authenticated page on LinkedIn. \ No newline at end of file diff --git a/Nextjs Mastery Challenge/Day11/readme.md b/Nextjs Mastery Challenge/Day11/readme.md new file mode 100644 index 00000000..fa6a1a36 --- /dev/null +++ b/Nextjs Mastery Challenge/Day11/readme.md @@ -0,0 +1,8 @@ +Day 11: User Management + + +Topic for LinkedIn: How do you manage users in Next.js? + + +Task: +Create a user management page in your Next.js project that allows users to view and edit their profile information. Share a screenshot of your user management page on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day12/readme.md b/Nextjs Mastery Challenge/Day12/readme.md new file mode 100644 index 00000000..f98984e2 --- /dev/null +++ b/Nextjs Mastery Challenge/Day12/readme.md @@ -0,0 +1,8 @@ +Day 12: Database Integration + + +Topic for LinkedIn: How do you integrate a database with your Next.js project? + + +Task: +Connect your Next.js project to a database and perform some basic CRUD operations. Share the code for your database connection on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day13/readme.md b/Nextjs Mastery Challenge/Day13/readme.md new file mode 100644 index 00000000..4e7e98d1 --- /dev/null +++ b/Nextjs Mastery Challenge/Day13/readme.md @@ -0,0 +1,8 @@ +Day 13: Performance Optimization + + +Topic for LinkedIn: How do you optimize the performance of a Next.js project? + + +Task: +Optimize the performance of your Next.js project using various techniques like code splitting, suspense, and caching. Share the results of your performance optimization on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day2/readme.md b/Nextjs Mastery Challenge/Day2/readme.md new file mode 100644 index 00000000..57acb2fe --- /dev/null +++ b/Nextjs Mastery Challenge/Day2/readme.md @@ -0,0 +1,6 @@ +Day 2: Pages in Next.js + +Topic for LinkedIn: What are pages in Next.js and how do they work? + +Task: +Create a new page in your Next.js project that displays a welcome and introductory message. Share a screenshot of your page on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day3/readme.md b/Nextjs Mastery Challenge/Day3/readme.md new file mode 100644 index 00000000..6d4dcb1c --- /dev/null +++ b/Nextjs Mastery Challenge/Day3/readme.md @@ -0,0 +1,6 @@ +Day 3: Link Component + +Topic for LinkedIn: What is the Link component in Next.js and how do you use it? + +Task: +Use the Link component to add links between your pages. Share the code for your navigation menu on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day4/readme.md b/Nextjs Mastery Challenge/Day4/readme.md new file mode 100644 index 00000000..a80c5312 --- /dev/null +++ b/Nextjs Mastery Challenge/Day4/readme.md @@ -0,0 +1,7 @@ +Day 4: Dynamic Routes + +Topic for LinkedIn: +What are dynamic routes in Next.js and how do you create them? + +Task: +Create a dynamic route that displays a list of blog posts. Share the URL for your dynamic route on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day5/readme.md b/Nextjs Mastery Challenge/Day5/readme.md new file mode 100644 index 00000000..faf01a31 --- /dev/null +++ b/Nextjs Mastery Challenge/Day5/readme.md @@ -0,0 +1,7 @@ +Day 5: Data Fetching + + +Topic for LinkedIn: What is data fetching in Next.js and how do you use it? + +Task: +Fetch data from an API and display it on a page in your Next.js project. Share a screenshot of your page on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day6/readme.md b/Nextjs Mastery Challenge/Day6/readme.md new file mode 100644 index 00000000..e9ff745c --- /dev/null +++ b/Nextjs Mastery Challenge/Day6/readme.md @@ -0,0 +1,7 @@ +Day 6: Styling in Next.js + +Topic for LinkedIn: What are the different ways to style components in Next.js? + + +Task: +Add some custom styles to your Next.js project using Tailwind CSS and ShadCN UI modules. Share a screenshot of your styled page on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day7/readme.md b/Nextjs Mastery Challenge/Day7/readme.md new file mode 100644 index 00000000..9bdd539d --- /dev/null +++ b/Nextjs Mastery Challenge/Day7/readme.md @@ -0,0 +1,7 @@ +Day 7: Forms in Next.js + + +Topic for LinkedIn: How do you handle forms in Next.js? + +Task: +Create a simple form in your Next.js project that takes user input and displays it on the page. Share the code for your form on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day8/readme.md b/Nextjs Mastery Challenge/Day8/readme.md new file mode 100644 index 00000000..5766aee7 --- /dev/null +++ b/Nextjs Mastery Challenge/Day8/readme.md @@ -0,0 +1,8 @@ +Day 8: API Routes + + +Topic for LinkedIn: What are API routes in Next.js and how do you use them? + + +Task: +Create a simple API route that returns some data in JSON format. Share the URL for your API route on LinkedIn. diff --git a/Nextjs Mastery Challenge/Day9/readme.md b/Nextjs Mastery Challenge/Day9/readme.md new file mode 100644 index 00000000..24470e4c --- /dev/null +++ b/Nextjs Mastery Challenge/Day9/readme.md @@ -0,0 +1,7 @@ +Day 9: Middleware + + +Topic for LinkedIn: What is middleware in Next.js and how do you use it? + +Task: +Create a simple middleware function that logs requests to your Next.js project. Share the code for your middleware function on LinkedIn. diff --git a/Nextjs Mastery Challenge/readme.md b/Nextjs Mastery Challenge/readme.md new file mode 100644 index 00000000..723b8e9c --- /dev/null +++ b/Nextjs Mastery Challenge/readme.md @@ -0,0 +1,13 @@ +Do this 30-day challenge to master Next.js and build a solid foundation in modern web development. Each day, you'll complete tasks and prompts designed to help learn and practice the essential Next.js features and best practices. + +By the end of the challenge, you should have a deep understanding of Next.js and be able to build high-performance, scalable web applications. + + +A few instructions: +Each day, focus on the task outlined for that day and complete the prompt provided. + +Share your progress on LinkedIn by posting a short summary of what you've learned and any relevant code snippets, images, or links. + +Use the hashtag #NextjsMasteryChallenge to connect with others participating in the challenge. + +Remember, the goal is to learn and improve your skills. Don't rush through the tasks; take your time to understand the concepts and ensure you're building a strong foundation.