react and full stack projects

calculator-clone/spec.yml

@@ -8,9 +8,9 @@ short-description: Build Calculator clone using the assets we provide and test y
 long-description: |
   Your challenge is to build out a calculator clone get it looking as close to the design as possible.
   
-  This challenge focuses HTML, CSS & JS. Javascript is really important in this since it allows the app to be functional
+  This project focuses HTML, CSS & JS. Javascript is really important in this since it allows the app to be functional
   
-  You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
   
   Your users should be able to:
   

discord-ui-clone/spec.yml

@@ -0,0 +1,29 @@
+name: Discord UI Clone
+tags: ["React","Tailwind"]
+starter-files: https://github.com/codedamn-projects/discord-ui-clone
+type: frontend
+level: easy
+cover-image: https://raw.githubusercontent.com/codedamn-projects/discord-ui-clone/master/designs/cover-image.png
+short-description: Build a Functional Discord Clone UI with React and Tailwind CSS
+long-description: |
+  Your challenge is to build out a Discord Interface and get it to look as close to the design as possible.
+  
+  This project focuses on your React and CSS skills, but you can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
+
+  Your final project should consist of the following functionalities 
+  
+  - Functional Lading page of Discord along with header and footer
+  - Login and Register Page
+  - Main Page (Dashboard Page) of Discord
+  - Add Friends Page
+  - Server Page
+
+  You can go through the `Readme.md` to see more details regarding the project and the assets folder to see the preview images of the project for desktop and mobile viewports. 
+
+    
+# https://codedamn.com/projects specific section
+codedamn:
+    helper-learning-path: frontend
+    show-community-banner: true
+    playground-layout: terminal-editor-browser
+    playground-image: html

disney-clone-react/spec.yml

@@ -8,7 +8,7 @@ short-description: Build a frontend clone for Disney using the assets we provide
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses on building the page in React.js alongside CSS. 
+  This project focuses on building the page in React.js alongside CSS. 
   
   Your users should be able to:
   

disney-clone/spec.yml

@@ -8,9 +8,9 @@ short-description: Build a frontend clone for Disney using the assets we provide
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+  This project focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
   
-  You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
   
   Your users should be able to:
   

editorial-html5-landing-project/spec.yml

@@ -8,7 +8,7 @@ short-description: Editorial/personal blog template built with HTML5 and CSS3. T
 long-description: |
     Your challenge is to build out this landing page and get it looking as close to the design as possible.
     
-    This challenge focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+    This project focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
     
     You can use any tools you like to help you complete this project. So if you've got something you'd like to practice, feel free to give it a go.
     

eventually-html5-landing-page/spec.yml

@@ -8,7 +8,7 @@ short-description: A simple and minimal landing page built in HTML5 for a pre-la
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+  This project focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
   
   You can use any tools you like to help you complete this project. So if you've got something you'd like to practice, feel free to give it a go.
   

github-landing-page-clone/spec.yml

@@ -8,9 +8,9 @@ short-description: Build a frontend clone for GitHub using the assets we provide
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+  This project focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
   
-  You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
   
   Your users should be able to:
   

html5-massively-landing-page/spec.yml

@@ -8,7 +8,7 @@ short-description: This project will be a perfect test of your layout and respon
 long-description: |
     Your task is to build out this landing page and get it looking as close to the design as possible.
 
-    This challenge focuses mostly on HTML, CSS and layouts with CSS.
+    This project focuses mostly on HTML, CSS and layouts with CSS.
 
     You can use any tools you like to help you complete this project. So if you've got something you'd like to practice, feel free to give it a go.
 

hulu-clone-project/spec.yml

@@ -8,9 +8,9 @@ short-description: Build Hulu landing page clone project to test your HTML, CSS
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+  This project focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
   
-  You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
   
   Your users should be able to:
   

instagram-clone-project/spec.yml

@@ -8,9 +8,9 @@ short-description: Build a frontend clone for Instagram using the assets we prov
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+  This project focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
   
-  You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
   
   Your users should be able to:
   

jsonproxyholder/spec.yml

@@ -0,0 +1,30 @@
+name: JSON Proxy Holder
+tags: ["JavaScript", "Node.js", "Express"]
+starter-files: 
+type: backend
+level: easy
+cover-image: 
+short-description: In this project, you're supposed to work with a popular JSON placeholder API by proxying the response from your backend server.
+long-description: |
+    Your challenge is to build out a Quiz App and get it to look as close to the design as possible.
+  
+    This project focuses on your JavaScript and Node.js skills, but you can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
+
+    Your tasks for this project are 
+
+    - proxy all of your backend requests received to the `jsonplaceholder.typicode.com` endpoint
+
+    -  add a custom header in every response you send
+
+    - using the backend api to build a simple react app that displays the data from the backend api you've created
+
+
+    You can go through the `Readme.md` to see more details regarding the project and the assets folder to see the preview images of the project for desktop and mobile viewports. 
+
+    
+# https://codedamn.com/projects specific section
+codedamn:
+    helper-learning-path: frontend
+    show-community-banner: true
+    playground-layout: terminal-editor-browser
+    playground-image: html

linkedin-clone/spec.yml

@@ -0,0 +1,28 @@
+name: LinkedIn Clone
+tags: ["HTML/CSS","JavaScript"]
+starter-files: 
+type: fullstack
+level: easy
+cover-image: https://raw.githubusercontent.com/codedamn-projects/linked-in-nextjs-clone/master/designs/Linked%20In%20Clone%20Home%20%5BDesktop%5D.png
+short-description: Build the complete LinkedIn application UI, API, and the Database
+long-description: |
+    Your challenge is to build out a Quiz App and get it to look as close to the design as possible.
+  
+    This project focuses on Next.js,Node.js & MongoDB but you can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
+
+    In this project
+    
+    - You have to make the user interface based on the designs provided
+    
+    - You should be also able to make an API to connect the to you application and perform database read and write operations
+
+
+    You can go through the `Readme.md` to see more details regarding the project and the assets folder to see the preview images of the project for desktop and mobile viewports. 
+
+    
+# https://codedamn.com/projects specific section
+codedamn:
+    helper-learning-path: frontend
+    show-community-banner: true
+    playground-layout: terminal-editor-browser
+    playground-image: html

multiverse-html5-photo-gallery/spec.yml

@@ -8,7 +8,7 @@ short-description: A photo gallery website with a popup photo functionality. Thi
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+  This project focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
   
   You can use any tools you like to help you complete this project. So if you've got something you'd like to practice, feel free to give it a go.
   

portfolio-project-html5/spec.yml

@@ -8,7 +8,7 @@ short-description: A simple and minimal portfolio page for you built in HTML5 +
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for changing the states of screen.
+  This project focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for changing the states of screen.
   
   You can use any tools you like to help you complete this project. So if you've got something you'd like to practice, feel free to give it a go.
   

quiz-app/spec.yml

@@ -0,0 +1,35 @@
+name: Quiz App
+tags: ["HTML/CSS","JavaScript"]
+starter-files: https://github.com/codedamn-projects/quiz-app
+type: frontend
+level: easy
+cover-image: https://raw.githubusercontent.com/codedamn-projects/quiz-app/master/assets/desktop-design.jpg
+short-description: An interactive, timed JavaScript quiz that stores a high score leaderboard in local storage.
+long-description: |
+  Your challenge is to build out a Quiz App and get it look as close to the design as possible.
+  
+  This project focuses HTML, CSS & JS. Javascript is really important in this since it allows the app to be functional by validating the correct answer
+  
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
+  
+  Your users should be able to:
+  
+  - View Highscores
+  
+  - Start and Complete the quiz with the functional timer
+  
+  - When questions of the quiz are completed the score is set to the remaining seconds of the timer.
+  
+  - The score should be added the to high scores in local storage
+
+  - The high scores should be sorted in descending order by score
+
+  You can go through the `Readme.md` to see more details regarding the project and the assets folder to see the preview images of the project for desktop and mobile viewports.  
+
+    
+# https://codedamn.com/projects specific section
+codedamn:
+    helper-learning-path: frontend
+    show-community-banner: true
+    playground-layout: terminal-editor-browser
+    playground-image: html

slack-clone/spec.yml

@@ -8,9 +8,9 @@ short-description: Build a frontend clone for Slack using the assets we provide
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
   
-  This challenge focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
+  This project focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
   
-  You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
   
   Your users should be able to:
   

todo-app/spec.yml

@@ -8,9 +8,9 @@ short-description: Build a Todo App clone using the assets we provide and test y
 long-description: |
   Your challenge is to build out a Todo App clone & get it looking as close to the design as possible.
   
-  This challenge focuses on HTML & CSS & JS. Javascript is used for making the website functional.
+  This project focuses on HTML & CSS & JS. Javascript is used for making the website functional.
   
-  You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+  You can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
   
   Your users should be able to: