├── LICENSE ├── README.md ├── front-end-projects ├── ai-chat-bot.json ├── country-page.json ├── country-quizz.json ├── data │ ├── property-listing-data.json │ └── simple-coffee-listing-data.json ├── property-listing.json ├── recipe-page-homechef.json ├── simple-coffee-listing.json ├── task-manager-app.json ├── translate-app.json └── weather-app.json ├── full-stack-projects ├── ai-image-generator.json ├── code-shraing-app-note-code.json ├── image-upload-app.json ├── my-task-board-app.json ├── unsplash-collection.json └── user-portfolio-management.json ├── javascript-projects ├── basic-text-to-speech.json ├── github-profile.json ├── guess-the-word.json ├── movie-search-app.json ├── multi-step-register-form.json ├── music-player.json ├── qa-code-generator.json └── random-quote.json ├── others ├── privacy-policy.md └── terms-and-conditions.md ├── paths.json └── responsive-web-projects ├── advanced-homepage-huffie.json ├── business-blog-card.json ├── contact-page.json ├── faq-page.json ├── portfolio-page.json ├── process-page.json ├── simple-blog-card.json ├── simple-homepage.json └── testimonial-page.json /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Project Ideas | DevChallenges.io 2 | Web developer real-life projects ideas | devchallenges.io project descriptions and user stories. 3 | 4 | ## Web Development Project Ideas 5 | 6 | This repository contains a list of web development project ideas for devchallenges.io. 7 | These projects are designed to help you practice your Web development skills and build your portfolio. 8 | 9 | ### Project Ideas 10 | 11 | All projects are divided into: 12 | - **5 levels**: Beginner, Junior, Mid-level, Upper-mid, Senior 13 | - **Different paths**: e.g. Responsive Web Developer, JavaScript Developer, Frontend Developer,... 14 | 15 | Each project is designed to practice a recommended tech stack, but you can choose to work with anything. 16 | 17 | **Link/Status**: If the project is ready in devchallenges.io, you should see a link to the project with designs, and resources to help you get started. Otherwise, `In Progress` means the project is being designed, empty means it has not been created. 18 | 19 | #### Responsive Web Developer Path 20 | 21 | This path is designed for you to practice HTML, CSS, and basic JavaScript. You can practice with frameworks like Tailwind CSS, Bootstrap,... based on your needs. 22 | 23 | | Project Name | Level | Recommended Tech | Link/Status 24 | | --- | --- | --- | --- | 25 | | Simple Card Component | Beginner | HTML, CSS | `In Progress` 26 | | Simple Homepage | Beginner | HTML, CSS | `In Progress` 27 | | Login Form | Beginner | HTML, CSS, JS | `In Progress` 28 | | About Page | Beginner | HTML, CSS | `In Progress` 29 | | Blog Page | Beginner | HTML, CSS | `In Progress` 30 | | Portfolio Webpage | Junior | HTML, CSS | `In Progress` 31 | | E-commerce Listing Page | Junior | HTML, CSS | `In Progress` 32 | | Advanced Homepage | Junior | HTML, CSS, JS | 33 | | Pricing Page | Beginner | HTML, CSS | 34 | | Survey Form | Beginner | HTML, CSS | 35 | | Testimonials Page | Beginner | HTML, CSS | 36 | | eBook Landing Page | Junior | HTML, CSS | 37 | | Responsive Navigation | Beginner | HTML, CSS, JS | 38 | | Responsive Dashboard | Beginner | HTML, CSS, JS | 39 | | Light/Dark Theme Homepage | Junior | HTML, CSS, JS | 40 | | Music Player | Junior | HTML, CSS, JavaScript | 41 | 42 | #### JavaScript Developer Path 43 | 44 | In this path, it's not yet recommended to use any Frontend libraries like React, but instead, you should practice the fundamentals of JavaScipt like Document Object Model (DOM), Algorithms, Events, and Fetch API,.. 45 | 46 | | Project Name | Level | Recommended Tech | Link/Status 47 | | --- | --- | --- | --- | 48 | | Multi Step Form | Junior | JavaScript, HTML, CSS | `In Progress` 49 | | Guess The Word | Mid-level | JavaScript, HTML, CSS | 50 | | Gradient generator | Junior | JavaScript, HTML, CSS | 51 | | Text to Speech | Junior | JavaScript, HTML, CSS | 52 | | GitHub Profile | Mid-level | JavaScript, API, HTML, CSS | 53 | | Movie Search App | Mid-level | JavaScript, API, HTML, CSS | 54 | | Random Quote | Mid-level | JavaScript, API, HTML, CSS | 55 | | Recipe App | Mid-level | JavaScript, API, HTML, CSS | 56 | | Password Check | Mid-level | JavaScript, HTML, CSS | 57 | | Check system battery | Mid-level | JavaScript, HTML, CSS | 58 | | QA code generator | Mid-level | JavaScript, HTML, CSS | 59 | | Spin the wheel guesser | Mid-level | JavaScript, HTML, CSS | 60 | | Dictionary App | Mid-level | JavaScript, HTML, CSS | 61 | | Flip a coin Game | Mid-level | JavaScript, API, HTML, CSS | 62 | | Snake Game | Mid-level | JavaScript, API, HTML, CSS | 63 | | Image Editor |Junior | JavaScript, HTML, CSS | 64 | | Product Selector |Junior | JavaScript, HTML, CSS | 65 | 66 | 67 | #### Frontend Developer Path 68 | 69 | This path is the place where you practice popular frameworks that are required in almost every Frontend job like React, Vue.js, and Svelte,... 70 | 71 | | Project Name | Level | Recommended Tech | Link/Status 72 | | --- | --- | --- | --- | 73 | | Budget App | Upper-mid | React/Vue/Svelte,... | `In Progress` 74 | | Weather App | Upper-mid | React/Vue/Svelte,... | 75 | | Movie Listing | Upper-mid | React/Vue/Svelte,... | 76 | | Stock Tracker App | Upper-mid | React/Vue/Svelte,... | 77 | | Github History | Upper-mid | React/Vue/Svelte,... | 78 | | Translate App | Upper-mid | React/Vue/Svelte,... | 79 | | Pixel Drawer | Upper-mid | React/Vue/Svelte,... | 80 | | ChatGPT Bot | Upper-mid | React/Vue/Svelte,... | 81 | | Currency Converter | Upper-mid | React/Vue/Svelte,... | 82 | | Property Listing page with filters | Upper-mid | React/Vue/Svelte,... | 83 | | Quizz App | Upper-mid | React/Vue/Svelte,... | 84 | | Calendar/Event App | Upper-mid | React/Vue/Svelte,... | 85 | | Task manager | Upper-mid | React/Vue/Svelte,... | 86 | | Codepen clone | Upper-mid | React/Vue/Svelte,... | 87 | 88 | #### Fullstack Developer Path 89 | 90 | In this path, you are expected to implement your own backend services, for example, using MEAN Stack (MongoDB, Express.js, AngularJS, Node.js) or LAMP Stack (Linux, Apache, MySQL, PHP),... You can also use tools like Supabse, Firebase,.. to speed up. 91 | 92 | | Project Name | Level | Recommended Tech | Link/Status 93 | | --- | --- | --- | --- | 94 | | User management | Beginner | Open | `In Progress` 95 | | Slack clone | Beginner | Open | `In Progress` 96 | | User management | Beginner | Open | `In Progress` 97 | 98 | ### Getting Started 99 | 100 | To get started, go to devchallenges.io, and choose a project that matches your needs. You will be given the needed resources and instructions to start. 101 | 102 | ### Contributing 103 | 104 | - If you have a project idea that you would like to add to the list, feel free to submit a pull request, alternatively, you can open an issue that explains the idea in more detail. Please ensure that your project idea is appropriate for the skill level. 105 | - If you find any typo, free feel to submit a pull request. 106 | 107 | 108 | ### License 109 | 110 | This project is licensed under the Apache License 2.0. 111 | 112 | -------------------------------------------------------------------------------- /front-end-projects/ai-chat-bot.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "AI Chatbot - simplechat.ai", 3 | "description": "As AI is the future, knowing how to build an AI chatbot can be helpful. In this challenge, you will work with a provided API and build a simple AI chatbot.", 4 | "userStories": [ 5 | { 6 | "content": "Create an AI chatbot that matches the given layout." 7 | }, 8 | { 9 | "content": "By default, users should see a small conversation between the user and the chatbot." 10 | }, 11 | { 12 | "content": "Users can ask the following questions and get responses from the chatbot." 13 | }, 14 | { 15 | "content": "Users can add new conversations. When a new conversation is added, its title should be the first question from the user." 16 | }, 17 | { 18 | "content": "Conversations should be stored in local storage." 19 | }, 20 | { 21 | "content": "Users can edit conversations' title." 22 | }, 23 | { 24 | "content": "Users can delete conversations." 25 | }, 26 | { 27 | "content": "The application should be responsive on all devices." 28 | }, 29 | { 30 | "content": "Deploy the solution and submit Repository URL and Demo URL." 31 | } 32 | ], 33 | "text": [{ "content": "New Chat" }, { "content": "Ask simplechat.ai anything" }] 34 | } 35 | -------------------------------------------------------------------------------- /front-end-projects/country-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Country Page - WorldRanks", 3 | "description": "Quite often, as a developer, you will have to work with a larger amount of data. In this challenge, you will work with a more complicated set of data of countries and display it in a table.", 4 | "userStories": [ 5 | { 6 | "content": "Create a country ranking page that matches the given design." 7 | }, 8 | { 9 | "content": "By default, users can see a list of all countries sorted by population." 10 | }, 11 | { 12 | "content": "Users can choose to sort by name alphabetical order or population or area (km²)." 13 | }, 14 | { 15 | "content": "Users can choose to filter by multiple regions, the regions can be Americas, Antarctic, Africa, Asia, Europe, or Oceania." 16 | }, 17 | { 18 | "content": "Users can choose to filter countries that are members of the United Nations." 19 | }, 20 | { 21 | "content": "Users can choose to filter countries that are independent." 22 | }, 23 | { 24 | "content": "Users can filter/search for countries by their names, regions or subregions." 25 | }, 26 | { 27 | "content": "Users can see the total number of countries." 28 | }, 29 | { 30 | "content": "Users can select a country and see more details on a country page." 31 | }, 32 | { 33 | "content": "On the country page, users can see info like population, area, capital,...." 34 | }, 35 | { 36 | "content": "On the country page, users can see the neighboring countries." 37 | }, 38 | { 39 | "content": "On the country page, when users select a neighboring country, it should redirect to the according country page." 40 | }, 41 | { 42 | "content": "[Optional] The country list is paginated", 43 | "optional": true 44 | }, 45 | { 46 | "content": "Deploy the solution and submit Repository URL and Demo URL." 47 | } 48 | ], 49 | "text": [ 50 | { "content": "Search by Name, Region, Subregion" }, 51 | { "content": "Member of the United Nations" }, 52 | { "content": "Area (km²)" }, 53 | { "content": "Neighbouring Countries" } 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /front-end-projects/country-quizz.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Country Quiz", 3 | "description": "Most of the time, API is optimized for displaying a set of data, but other times, we need to modify the data and use it for our purpose. In this challenge, you will work with country API and build a country quiz app.", 4 | "userStories": [ 5 | { 6 | "content": "Create a country quiz that matches the given design." 7 | }, 8 | { 9 | "content": "By default, generate 10 questions about countries with the given API." 10 | }, 11 | { 12 | "content": "In each question, users should see 4 options." 13 | }, 14 | { 15 | "content": "When users select an answer, they should get the correct answer immediately with according indicators in the design." 16 | }, 17 | { 18 | "content": "User can navigate to any questions." 19 | }, 20 | { 21 | "content": "When users answer all 10 questions, they should see a congratulations page with the result and choose to play again." 22 | }, 23 | { 24 | "content": "Deploy the solution and submit Repository URL and Demo URL." 25 | } 26 | ], 27 | "text": [{ "content": "Country Quiz" }, { "content": "Congrats! You completed the quiz." }, { "content": "You answer 4/10 correctly." }] 28 | } 29 | -------------------------------------------------------------------------------- /front-end-projects/data/property-listing-data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Nordic Retreat with Stunning Views", 5 | "description": "Immerse yourself in the beauty of the Nordic landscape at this sleek and stylish cabin. With floor-to-ceiling windows and a spacious deck, you'll have breathtaking views of the surrounding mountains.", 6 | "price": 250, 7 | "rating": 4.9, 8 | "superhost": true, 9 | "location": "Norway", 10 | "capacity": { 11 | "people": 3, 12 | "bedroom": 2 13 | }, 14 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/property-challenge/thumbnail-1.jpg" 15 | }, 16 | { 17 | "id": 2, 18 | "title": "Cabin with Private Sauna", 19 | "description": "Get away from it all at this secluded cabin, tucked away in the heart of the Nordic wilderness. Relax in your own private sauna or take a dip in the nearby lake. With its rustic charm and peaceful surroundings.", 20 | "price": 170, 21 | "rating": 4.9, 22 | "superhost": true, 23 | "location": "Finland", 24 | "capacity": { 25 | "people": 4, 26 | "bedroom": 2 27 | }, 28 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/property-challenge/thumbnail-2.jpg" 29 | }, 30 | { 31 | "id": 3, 32 | "title": "Cozy Cabin in the Woods", 33 | "description": "Escape to this charming cabin nestled in the heart of the Nordic wilderness. With its rustic decor and peaceful surroundings, you'll feel a million miles away from the hustle and bustle of everyday life.", 34 | "price": 180, 35 | "rating": 4.7, 36 | "superhost": false, 37 | "location": "Sweden", 38 | "capacity": { 39 | "people": 3, 40 | "bedroom": 2 41 | }, 42 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/property-challenge/thumbnail-3.jpg" 43 | }, 44 | { 45 | "id": 4, 46 | "title": "Charming Cabin with Lake Access", 47 | "description": "Enjoy the best of both worlds at this charming Nordic cabin, located just steps from a beautiful lake. Spend your days swimming, fishing, or kayaking, then come back to a cabin for a relaxing evening by the fire.", 48 | "price": 150, 49 | "rating": 4.9, 50 | "superhost": true, 51 | "location": "Switzerland", 52 | "capacity": { 53 | "people": 2, 54 | "bedroom": 1 55 | }, 56 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/property-challenge/thumbnail-4.jpg" 57 | }, 58 | { 59 | "id": 5, 60 | "title": "Log Cabin with Fireplace", 61 | "description": "Experience the charm of a traditional Nordic log cabin at this retreat. You'll feel like you've stepped back in time. But don't worry, you'll still have all the modern amenities you need for a comfortable stay.", 62 | "price": 99, 63 | "rating": 4.9, 64 | "superhost": false, 65 | "location": "Sweden", 66 | "capacity": { 67 | "people": 2, 68 | "bedroom": 1 69 | }, 70 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/property-challenge/thumbnail-5.jpg" 71 | }, 72 | { 73 | "id": 6, 74 | "title": "Cabin with Mountain Views", 75 | "description": "Soak in the stunning mountain views from the comfort of your own private hot tub at this beautiful Nordic cabin. With its spacious deck and interior, you'll have everything you need for a relaxing stay.", 76 | "price": 225, 77 | "rating": 4.8, 78 | "superhost": true, 79 | "location": "Norway", 80 | "capacity": { 81 | "people": 5, 82 | "bedroom": 2 83 | }, 84 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/property-challenge/thumbnail-6.jpg" 85 | } 86 | ] 87 | -------------------------------------------------------------------------------- /front-end-projects/data/simple-coffee-listing-data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "name": "Cappuccino", 5 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/coffee-challenge/cappuccino.jpg", 6 | "price": "$5.20", 7 | "rating": 4.7, 8 | "votes": 65, 9 | "popular": true, 10 | "available": true 11 | }, 12 | { 13 | "id": 2, 14 | "name": "House Coffee", 15 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/coffee-challenge/house-coffee.jpg", 16 | "price": "$3.50", 17 | "rating": 4.85, 18 | "votes": 15, 19 | "popular": true, 20 | "available": true 21 | }, 22 | { 23 | "id": 3, 24 | "name": "Espresso", 25 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/coffee-challenge/espresso.jpg", 26 | "price": "$2.50", 27 | "rating": 4.9, 28 | "votes": 55, 29 | "popular": false, 30 | "available": true 31 | }, 32 | { 33 | "id": 4, 34 | "name": "Coffee Latte", 35 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/coffee-challenge/coffee-latte.jpg", 36 | "price": "$4.50", 37 | "rating": 5.0, 38 | "votes": 23, 39 | "popular": false, 40 | "available": true 41 | }, 42 | { 43 | "id": 5, 44 | "name": "Chocolate Coffee", 45 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/coffee-challenge/chocolate-coffee.jpg", 46 | "price": "$4.00", 47 | "rating": "4.65", 48 | "votes": 122, 49 | "popular": false, 50 | "available": false 51 | }, 52 | { 53 | "id": 6, 54 | "name": "Valentine Special", 55 | "image": "https://csyxkpbavpcrhwqhcpyy.supabase.co/storage/v1/object/public/assets/coffee-challenge/valentine-special.jpg", 56 | "price": "$5.50", 57 | "rating": null, 58 | "votes": 0, 59 | "popular": false, 60 | "available": true 61 | } 62 | ] 63 | -------------------------------------------------------------------------------- /front-end-projects/property-listing.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Property Listing", 3 | "description": "This challenge is perfect to improve your Frontend skills from beginner to more advanced. You will need to implement reusable components and filter functionalities.", 4 | "userStories": [ 5 | { 6 | "content": "Create a property listing page that matches the given design." 7 | }, 8 | { 9 | "content": "Use React or other Front-end libraries for this challenge." 10 | }, 11 | { 12 | "content": "Create a Reusable Property Card component." 13 | }, 14 | { 15 | "content": "The card component should include a thumbnail picture, title, description, capacity, price, and rating." 16 | }, 17 | { 18 | "content": "The card component should render superhost tag conditionally." 19 | }, 20 | { 21 | "content": "Render Property list with given data. The data should come from a given API or downloaded JSON file." 22 | }, 23 | { 24 | "content": "Users can filter properties by location and they can select multiple locations at once." 25 | }, 26 | { 27 | "content": "Users can filter properties by superhost." 28 | }, 29 | { 30 | "content": "Users can filter properties by property type: 1 bedroom or 2 bedrooms." 31 | }, 32 | { 33 | "content": "Deploy the solution and submit Repository URL and Demo URL." 34 | } 35 | ], 36 | "text": [ 37 | { "content": "Peace, nature, dream" }, 38 | { "content": "Find and book a great experience." } 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /front-end-projects/recipe-page-homechef.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Recipe page - HomeChef", 3 | "description": "In this challenge, you will work with an API to build a Recipe Page/Application. This will require you to understand the API and make multiple API calls to complete the challenge.", 4 | "userStories": [ 5 | { 6 | "content": "Create a recipe page that matches the given design." 7 | }, 8 | { 9 | "content": "By default, users can see a list of deserts." 10 | }, 11 | { 12 | "content": "Users can select different categories: Beef, Chicken, Dessert, Lamb, Miscellaneous, Pasta,...." 13 | }, 14 | { 15 | "content": "The category list should come from the API." 16 | }, 17 | { 18 | "content": "Users can sort recipes by their name or ID." 19 | }, 20 | { 21 | "content": "Users can search for recipes by name or instructions or area" 22 | }, 23 | { 24 | "content": "Users can select a recipe to redirect to a recipe detail page." 25 | }, 26 | { 27 | "content": "On the Recipe detail page, users should see category, area, ingredients and instructions." 28 | }, 29 | { 30 | "content": "Deploy the solution and submit Repository URL and Demo URL." 31 | } 32 | ], 33 | "text": [{ "content": "Search recipes and more..." }, { "content": "Back to categories" }] 34 | } 35 | -------------------------------------------------------------------------------- /front-end-projects/simple-coffee-listing.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Simple Coffee Listing", 3 | "description": "This challenge is great for working with Front-end libraries like React, Vue,... You will need to implement a reusable card component with different variables based on the data given.", 4 | "userStories": [ 5 | { 6 | "content": "Create a coffee listing page that matches the given design." 7 | }, 8 | { 9 | "content": "Use React or other Front-end libraries for this challenge." 10 | }, 11 | { 12 | "content": "Create a Reusable Card component." 13 | }, 14 | { 15 | "content": "The card component should include a picture, name, pricing, rating, and number of votes if exists." 16 | }, 17 | { 18 | "content": "The card component should render popular tag, availability status conditionally." 19 | }, 20 | { 21 | "content": "Render Coffee list with given data. The data should come from a given API or downloaded JSON file." 22 | }, 23 | { 24 | "content": "Users can choose to list all products or just available products." 25 | }, 26 | { 27 | "content": "Deploy the solution and submit Repository URL and Demo URL." 28 | } 29 | ], 30 | "text": [ 31 | { "content": "Our Collection" }, 32 | { 33 | "content": "Introducing our Coffee Collection, a selection of unique coffees from different roast types and origins, expertly roasted in small batches and shipped fresh weekly." 34 | }, 35 | { "content": "All Products" }, 36 | { "content": "Available Now" } 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /front-end-projects/task-manager-app.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Task Manager App", 3 | "description": "As a frontend developer, it requires you to work with external libraries/tools all the time, sometimes it can be complicated and takes days to understand. In this challenge, you will work with a task manager application, this will challenge you to work with external JS library, as well as data management.", 4 | "userStories": [ 5 | { 6 | "content": "Build a task management app that matches the given design." 7 | }, 8 | { 9 | "content": "By default, users can see a board with 4 columns (Backlog, In Progress, In Review, and Completed) and a default task in backlog." 10 | }, 11 | { 12 | "content": "Users can add a new task to Backlog." 13 | }, 14 | { 15 | "content": "When a task is selected, users can edit the task name and status." 16 | }, 17 | { 18 | "content": "When a task is selected, users can choose to add a random cover image with a given API or remove the image if exists." 19 | }, 20 | { 21 | "content": "When a task is selected, users can add and remove tags. They should be able to choose at least 4 tags like in the design." 22 | }, 23 | { 24 | "content": "Users can add a new board. When a board is created, it should have a random logo and 'Default board' as the name." 25 | }, 26 | { 27 | "content": "Users can delete the board." 28 | }, 29 | { 30 | "content": "Users can drag and drop task cards to different columns." 31 | }, 32 | { 33 | "content": "Users can see the number of tasks in each column." 34 | }, 35 | { 36 | "content": "Users can toggle between light and dark mode." 37 | }, 38 | { 39 | "content": "Deploy the solution and submit Repository URL and Demo URL." 40 | } 41 | ], 42 | "text": [{ "content": "Add new board" }, { "content": "Add new task card" }, 43 | { "content": "Default Board" }, 44 | { "content": "Task details" }, 45 | { "content": "Create board" }, 46 | { "content": "No cover photo" }, 47 | { "content": "e.g: Default Board" }, 48 | { "content": "Backlog" }, 49 | { "content": "In Progress" }, 50 | { "content": "In Review " }, 51 | { "content": "Completed " }, 52 | { "content": "Concept" }, 53 | { "content": "Technical" }, 54 | { "content": "Design" }, 55 | { "content": "Front-end" }, 56 | { "content": "Task name" }, 57 | { "content": "Status" } 58 | ] 59 | } 60 | -------------------------------------------------------------------------------- /front-end-projects/translate-app.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Translate App", 3 | "description": "As a Frontend developer, you will be given tasks to build an interactive application. In this challenge, you will build a simple translate application with a given API.", 4 | "userStories": [ 5 | { 6 | "content": "Create a translate application page that matches the given design." 7 | }, 8 | { 9 | "content": "By default, it should translate 'Hello, how are you' to French." 10 | }, 11 | { 12 | "content": "Users can change translating text with a maximum of 500 characters." 13 | }, 14 | { 15 | "content": "Users can see the translated text after selecting the Translate button. Optionally, users can see updates in real-time and you use debounce or throttling to optimize the application." 16 | }, 17 | { 18 | "content": "Users can choose different languages to translate from. They should see at least 3 options: Detect Language, English and French." 19 | }, 20 | { 21 | "content": "Users can switch translation language and translated language." 22 | }, 23 | { 24 | "content": "Users can have the option to listen to the translating and translated texts." 25 | }, 26 | { 27 | "content": "Users can copy the translating and translated texts." 28 | } 29 | ], 30 | "text": [{ "content": "Detect Language" }, { "content": "Translate" }] 31 | } 32 | -------------------------------------------------------------------------------- /front-end-projects/weather-app.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Weather App", 3 | "description": "Weather app has been a popular project to add to many devs' portfolios. In this challenge, you will work with an API to get the current weather of a location.", 4 | "userStories": [ 5 | { 6 | "content": "Create a weather app that matches the given design." 7 | }, 8 | { 9 | "content": "By default, the user can see the weather of a location (you can choose a location). Alternatively, it could use the current location of the user." 10 | }, 11 | { 12 | "content": "Users can see temperature, location, time, wind, high/low temperature, weather status of the selected location." 13 | }, 14 | { 15 | "content": "Users can see the temperature of the upcoming 24 hours with 3-hour intervals." 16 | }, 17 | { 18 | "content": "Users can see a forecast of the next 5 days with weather status and low/high temperature." 19 | }, 20 | { 21 | "content": "Users can see summary weather of large cities such as New York, Copenhagen or Ho Chi Minh City (you can choose 3 cities of your choice)." 22 | }, 23 | { 24 | "content": "Users can choose to display temperature in Celsius or Fahrenheit." 25 | }, 26 | { 27 | "content": "Users can search for a city and see its weather." 28 | }, 29 | { 30 | "content": "Deploy the solution and submit Repository URL and Demo URL." 31 | } 32 | ], 33 | "text": [{ "content": "Search city...." }, { "content": "Other large cities" }, { "content": "5-day forecast" }] 34 | } 35 | -------------------------------------------------------------------------------- /full-stack-projects/ai-image-generator.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "AI Image Generation App", 3 | "description": "The challenge is to create a full-stack application that allows users to generate AI images, manage their own collections, and view others' generated images. The fusion of AI and full-stack development opens doors to a future where web applications are more responsive and capable than ever before.", 4 | "userStories": [ 5 | { 6 | "content": "Create an Image Generation App according to the design." 7 | }, 8 | { 9 | "content": "By default, the active tab should be 'Generate Image' page." 10 | }, 11 | { 12 | "content": "Users can log in with Github or your chosen third party." 13 | }, 14 | { 15 | "content": "On Generate Image page, users can enter a prompt, enter a negative prompt, select a color, select a resolution, and change guidance." 16 | }, 17 | { 18 | "content": "Given a valid prompt and a logged-in user, they can generate a new image by selecting the 'Generate Image' button." 19 | }, 20 | { 21 | "content": "On Feed page, users can see a list of cards. Each card includes a generated image, author name, and a bookmark button." 22 | }, 23 | { 24 | "content": "On Feed page, users can search images by keywords. Keywords are from generated prompts." 25 | }, 26 | { 27 | "content": "On Feed page, users can save images to their collection." 28 | }, 29 | { 30 | "content": "On Feed page, users can select a card and see the image details." 31 | }, 32 | { 33 | "content": "On Image details modal, users can see the generated image, the prompt, the negative prompt, created date, resolution, and seed number." 34 | }, 35 | { 36 | "content": "On Image details modal, users can copy the settings to generate a new image by selecting the 'Generate with this settings' button." 37 | }, 38 | { 39 | "content": "On Image details modal, users can download the image." 40 | }, 41 | { 42 | "content": "On Generation History Page, users can see their generated image history." 43 | }, 44 | { 45 | "content": "On My Collection Page, users see the saved images." 46 | }, 47 | { 48 | "content": "Deploy the solution and submit Repository URL and Demo URL." 49 | } 50 | ], 51 | "text": [ 52 | { "content": "Enter the prompt" }, 53 | { "content": "Negative Prompt (Optional)" }, 54 | { "content": "Resolution" }, 55 | { "content": "Guidance (5.0)" }, 56 | { "content": "Generate Image" }, 57 | { "content": "Breathtaking digital art illustration of a celestial galaxy, bursting with vibrant colors and sparkling stars, reminiscent of an infinite cosmic journey" }, 58 | { "content": "Search images by keywords" }, 59 | { "content": "Generation History" }, 60 | { "content": "Prompt details" }, 61 | { "content": "Negative prompt" }, 62 | { "content": "Created on" }, 63 | { "content": "Input Resolution" }, 64 | { "content": "My Collection" }, 65 | { "content": "Generate with this settings" }, 66 | { "content": "Sign In to Continue" }, 67 | { "content": "Sign in with Github" } 68 | ] 69 | } 70 | 71 | -------------------------------------------------------------------------------- /full-stack-projects/code-shraing-app-note-code.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Code Sharing App - NoteCode", 3 | "description": "This challenge is an excellent opportunity for Fullstack developers to test their basic skills by creating a simple code-sharing application called NoteCode. The application will allow users to store and share coding snippets, and it will require the use of both front-end and back-end development skills.", 4 | "userStories": [ 5 | { 6 | "content": "Create a Coding Sharing App - NoteCode following given design." 7 | }, 8 | { 9 | "content": "By default, users should see an HTML given snippet. See `Code Guide` for default HTML code." 10 | }, 11 | { 12 | "content": "When users select the `Share` button, a new ID should be generated, and users can access the saved code with the generated ID. See `Code Guide` for more details." 13 | }, 14 | { 15 | "content": "After code is saved and shared, `Share` button should be disabled until users make an edit ." 16 | }, 17 | { 18 | "content": "Users can choose the language and theme they want to save and share." 19 | }, 20 | { 21 | "content": "The application should be responsive on all devices." 22 | }, 23 | { 24 | "content": "Deploy the solution and submit Repository URL and Demo URL." 25 | } 26 | ], 27 | "text": [{ "content": "Create & Share" }, { "content": "Your Code easily" }] 28 | } 29 | -------------------------------------------------------------------------------- /full-stack-projects/image-upload-app.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Simple Image Upload App", 3 | "description": "In full-stack development, a common task involves working with files. This challenge presents an opportunity to create a straightforward Image Upload application, enabling users to upload images.", 4 | "userStories": [ 5 | { 6 | "content": "Create a simple image upload application following the given design." 7 | }, 8 | { 9 | "content": "Users can upload an image at a time. The file should be JPG, PNG, or GIF. The maximum size is 2MB." 10 | }, 11 | { 12 | "content": "Users can drag and drop the file to upload it." 13 | }, 14 | { 15 | "content": "Users can browse files and select a file to upload." 16 | }, 17 | { 18 | "content": "When the image is uploading, users can see a loader like in the design." 19 | }, 20 | { 21 | "content": "When the image is successfully uploaded, users can see the image." 22 | }, 23 | { 24 | "content": "After the image is uploaded, users can copy its address by selecting the `Share` button" 25 | }, 26 | { 27 | "content": "After the image is uploaded, users can download the image by selecting the `Download` button" 28 | }, 29 | { 30 | "content": "Optionally, users change theme between dark and light." 31 | }, 32 | { 33 | "content": "Deploy the solution and submit Repository URL and Demo URL." 34 | } 35 | ], 36 | "text": [ 37 | { "content": "Drag & drop a file or browse files" }, 38 | { "content": "JPG, PNG or GIF - Max file size 2MB" }, 39 | { "content": "Uploading, please wait.." }, 40 | { "content": "Share" }, 41 | { "content": "Download" } 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /full-stack-projects/my-task-board-app.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "My Task Board", 3 | "description": "In this full-stack challenge, you will develop a straightforward task management application, which will involve implementing essential HTTP methods such as GET, POST, PUT, and DELETE. This project will provide an opportunity to demonstrate proficiency in full-stack development by creating a system that enables users to manage tasks using a range of fundamental HTTP operations.", 4 | "userStories": [ 5 | { 6 | "content": "Create a simple task management application following the given design." 7 | }, 8 | { 9 | "content": "By default, it should show a board with 4 tasks like in the design." 10 | }, 11 | { 12 | "content": "Users can edit task name, description, icon, and status." 13 | }, 14 | { 15 | "content": "Users can delete tasks by selecting `Delete` button." 16 | }, 17 | { 18 | "content": "When users select `Add new task` option, a new task is added with a default name." 19 | }, 20 | { 21 | "content": "Users can edit board name and optionally, users can edit board description as well." 22 | }, 23 | { 24 | "content": "When users first visit the app, a new board with a unique id is created and saved to the database or alternatively a board is created after users make the first change." 25 | }, 26 | { 27 | "content": "Each board can be accessed by a unique id, e.g: /board/:board-id" 28 | }, 29 | { 30 | "content": "Deploy the solution and submit Repository URL and Demo URL." 31 | } 32 | ], 33 | "text": [ 34 | { "content": "My Task Board" }, 35 | { "content": "Tasks to keep organised" }, 36 | { "content": "Enter a short description" }, 37 | { "content": "In Progress" }, 38 | { "content": "Completed" }, 39 | { "content": "Won’t do" }, 40 | { "content": "Task in Progress" }, 41 | { "content": "Task Completed" }, 42 | { "content": "Task Won’t Do" }, 43 | { "content": "Task To Do" }, 44 | { "content": "Add new task" } 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /full-stack-projects/unsplash-collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Unsplash Collection - Unsplash Box", 3 | "description": "In this full-stack challenge, you will develop a service to store collections of Unsplash images, allowing users to add Unsplash images to their collections. This project will involve creating a functionality similar to Unsplash's collection feature, providing an opportunity to demonstrate proficiency in full-stack development by enabling users to manage and store curated sets of Unsplash images.", 4 | "userStories": [ 5 | { 6 | "content": "Create a multiple-page website following the given design." 7 | }, 8 | { 9 | "content": "On Homepage, users can search for images from Unsplash given keywords." 10 | }, 11 | { 12 | "content": "On Homepage, when user press `Enter`, a list of images should be shown as a result if at least a keyword is provided." 13 | }, 14 | { 15 | "content": "Users can select an image and see its details in a separate Image page." 16 | }, 17 | { 18 | "content": "On Image page, users can see the author and published date." 19 | }, 20 | { 21 | "content": "On Image page, users can see a list of collections that the image belongs to." 22 | }, 23 | { 24 | "content": "On Image page, users can choose to add the image to a collection by selecting `Add to Collection` button" 25 | }, 26 | { 27 | "content": "When `Add to Collection` button is selected, users can search and add images to searched collections. The collection search result should only show collections that the image does not yet belong to." 28 | }, 29 | { 30 | "content": "On Image page, users can remove the image from its collections." 31 | }, 32 | { 33 | "content": "On Image page, users can download the image." 34 | }, 35 | { 36 | "content": "On Collections page, users can see and select existing collections." 37 | }, 38 | { 39 | "content": "On Collections page, when a collection is selected, users can see a list of images in the collection." 40 | }, 41 | { 42 | "content": "Deploy the solution and submit Repository URL and Demo URL." 43 | } 44 | ], 45 | "text": [ 46 | { "content": "Search high-resolution images from Unsplash" }, 47 | { "content": "Enter your keywords..." }, 48 | { "content": "Home" }, 49 | { "content": "Explore the world through collections of beautiful photos free to use under the Unsplash License." }, 50 | { "content": "Add to Collection" }, 51 | { "content": "Remove" }, 52 | { "content": "Download" } 53 | ] 54 | } 55 | 56 | -------------------------------------------------------------------------------- /full-stack-projects/user-portfolio-management.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "User Portfolio Management", 3 | "description": "In this challenge, you will develop a full-stack application that allows users to sign up and create/manage their developer portfolios. The focus will be on implementing robust user data management, ensuring security, creating dynamically generated pages, and optimizing the app for search engines (SEO).", 4 | "userStories": [ 5 | { 6 | "content": "Create a User Portfolio Management App according to the design." 7 | }, 8 | { 9 | "content": "By default, users are asked to sign in." 10 | }, 11 | { 12 | "content": "On 'Sign In' Page, users can choose login with Github or by email and password." 13 | }, 14 | { 15 | "content": "On 'Sign In' Page, users can select the 'forgot password' option and be redirected to the 'Forgot password' page" 16 | }, 17 | { 18 | "content": "On 'Forgot Password' page, user can enter their email and get a magic link after selecting the 'Reset Password' button." 19 | }, 20 | { 21 | "content": "When users select the magic link, they are redirected to the 'Choose new password' page." 22 | }, 23 | { 24 | "content": "On 'Choose new password' page, users can enter a new password with the requirements given in the design." 25 | }, 26 | { 27 | "content": "Users can sign up with email and password. Optionally, an email with a magic link can be sent to verify the account." 28 | }, 29 | { 30 | "content": "On 'Profile setting' page, logged-in users can update their profile image, job title, name, and bio." 31 | }, 32 | { 33 | "content": "On 'Projects setting' page, logged-in users can add new projects with project name, demo URL, repository URL, and description." 34 | }, 35 | { 36 | "content": "On 'Projects setting' page, logged-in users can edit added projects." 37 | }, 38 | { 39 | "content": "On 'Portfolio' page, users can see the name, job title, bio, and the projects." 40 | }, 41 | { 42 | "content": "On 'Portfolio' page, others can send the user an email by selecting the contact button." 43 | }, 44 | { 45 | "content": "Deploy the solution and submit Repository URL and Demo URL." 46 | } 47 | ], 48 | "text": [ 49 | { "content": "Easy Portfolio for Developer" }, 50 | { "content": "As a web developer, having a portfolio is essential for showcasing your technical skills and attracting potential clients. A portfolio is a museum of your work, with past tech stacks, case studies, and your work history." }, 51 | { "content": "Login to account" }, 52 | { "content": "Enter your credentials to access your account" }, 53 | { "content": "Sign in with Github" }, 54 | { "content": "Enter email" }, 55 | { "content": "Enter a password" }, 56 | { "content": "Forgot password" }, 57 | { "content": "Not a member?" }, 58 | { "content": "Create an account" }, 59 | { "content": "Create your account" }, 60 | { "content": "Enter the fields below to get started" }, 61 | { "content": "one lowercase character" }, 62 | { "content": "one special character" }, 63 | { "content": "one uppercase character" }, 64 | { "content": "8 character minimum" }, 65 | { "content": "one number" }, 66 | { "content": "Already have an account? Log in" }, 67 | { "content": "We’ll email you instructions to reset your password" }, 68 | { "content": "Back to login" }, 69 | { "content": "Choose a new password" }, 70 | { "content": "Enter your new password and you’re all set." }, 71 | { "content": "Re-enter a password" }, 72 | { "content": "Profile settings" }, 73 | { "content": "Image must be 256 x 256px - max 2MB" }, 74 | { "content": "Upload Profile Image" }, 75 | { "content": "Delete Image" }, 76 | { "content": "Job title" }, 77 | { "content": "example@mail.com" }, 78 | { "content": "Enter your job title" }, 79 | { "content": "Enter your name" }, 80 | { "content": "Enter a short introduction.." }, 81 | { "content": "Projects settings" }, 82 | { "content": "Add project" }, 83 | { "content": "Image must be PNG or JPEG - max 2MB" }, 84 | { "content": "Project Name" }, 85 | { "content": "Enter your project name" }, 86 | { "content": "Demo URL" }, 87 | { "content": "Enter the demo URL" }, 88 | { "content": "Repository URL" }, 89 | { "content": "Enter the repository URL" }, 90 | { "content": "Enter a short description.." }, 91 | { "content": "A passionate Junior Front-end Developer with extensive experience in HTML, CSS, JavaScript, and React. Proven track record of developing user-friendly interfaces and optimizing website performance. Eager to learn and grow in the tech industry." } 92 | ] 93 | } 94 | 95 | -------------------------------------------------------------------------------- /javascript-projects/basic-text-to-speech.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Text to Speech - Speechbot", 3 | "description": "The challenge is to create a simple text-to-speech application using advanced built-in JavaScript functionality. This involves working with JavaScript APIs such as the Speech Recognition API and the Speech Synthesis API.", 4 | "userStories": [ 5 | { 6 | "content": "Create a text-to-speech app that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add inputs, tabs, buttons,.. according to the design." 13 | }, 14 | { 15 | "content": "Use JavaScript to add interactivity." 16 | }, 17 | { 18 | "content": "Users can enter custom text." 19 | }, 20 | { 21 | "content": "Users can choose the voice of the speech, the default should be 'Albert'." 22 | }, 23 | { 24 | "content": "Users can choose the speed of the speech (0.5, 0.75, 1 or 1.5 times)." 25 | }, 26 | { 27 | "content": "Users can select Text to Speech button and listen to the speech." 28 | }, 29 | { 30 | "content": "The page should be responsive on different screen sizes." 31 | }, 32 | { 33 | "content": "Deploy the solution and submit Repository URL and Demo URL." 34 | } 35 | ], 36 | "text": [ 37 | { "content": "Enter your text" }, 38 | { 39 | "content": "Enter your text above and hit 'play.' You can choose a different voice by selecting an option from the dropdown menu." 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /javascript-projects/github-profile.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Github Profile", 3 | "description": "The challenge requires creating a Github Profile search application that utilizes multiple API endpoints. The Github Profile search app requires the use of multiple APIs, such as the Github REST API, which returns information about a repository as a JSON.", 4 | "userStories": [ 5 | { 6 | "content": "Create a Github profile page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add inputs, images, buttons,.. according to the design." 13 | }, 14 | { 15 | "content": "Use JavaScript to add interactivity." 16 | }, 17 | { 18 | "content": "Users should be able to search for user by user name." 19 | }, 20 | { 21 | "content": "User should be able to see the number of followers, following, and location." 22 | }, 23 | { 24 | "content": "User should be able to see the repositories that profile has." 25 | }, 26 | { 27 | "content": "User should be able to see the details of each repository." 28 | }, 29 | { 30 | "content": "When users select repository card, they should be able to see the repository page in the new tab." 31 | }, 32 | { 33 | "content": "The page should be responsive on different screen sizes." 34 | }, 35 | { 36 | "content": "Deploy the solution and submit Repository URL and Demo URL." 37 | } 38 | ], 39 | "text": [{ "content": "View all repositories" }] 40 | } 41 | -------------------------------------------------------------------------------- /javascript-projects/guess-the-word.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Guess The Word Game", 3 | "description": "This challenge is great to advance your JavaScript skills. The challenge is to create a small game that tests your data management and DOM manipulation with JavaScript.", 4 | "userStories": [ 5 | { 6 | "content": "Create a guess the word game that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Use Vanilla JavaScript to add interactivity. " 13 | }, 14 | { 15 | "content": "Users can see a random scrambled word when the page is first loaded or after users click the random button." 16 | }, 17 | { 18 | "content": "Users can enter one letter at a time. After each attempt, the input should automatically focus on the next input if it exists." 19 | }, 20 | { 21 | "content": "Users can see the number of wrong answers (tries) and which answers are wrong (mistakes)." 22 | }, 23 | { 24 | "content": "Users can regenerate a new scrambled word by selecting the random button." 25 | }, 26 | { 27 | "content": "Users can reset all inputs, mistakes, and tries by selecting the reset button." 28 | }, 29 | { 30 | "content": "When the number of tries or mistakes reaches 6, the game should be reset." 31 | }, 32 | { 33 | "content": "When the user completes the game, it should show a '🎉 Success' alert." 34 | }, 35 | { 36 | "content": "The page should be responsive on different screen sizes." 37 | }, 38 | { 39 | "content": "Deploy the solution and submit Repository URL and Demo URL." 40 | } 41 | ], 42 | "text": [ 43 | { "content": "Random" }, 44 | { 45 | "content": "Reset" 46 | } 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /javascript-projects/movie-search-app.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Movie Search App - OMDb", 3 | "description": "The challenge is to create a movie search application using external APIs and advanced JavaScript functionalities. The application will allow users to search for movies and display information about them. To create the application, developers can use APIs such as the OMDB API, which provides movie information such as title, year, plot, and ratings.", 4 | "userStories": [ 5 | { 6 | "content": "Create a movie search app that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add inputs, images, details tags,.. according to the design." 13 | }, 14 | { 15 | "content": "Use JavaScript to add interactivity." 16 | }, 17 | { 18 | "content": "Users should be able to enter a movie name in search input." 19 | }, 20 | { 21 | "content": "After search input is filled and users press enter, users should see a movie or `Movie not found` text if there is no movie matched the searched text." 22 | }, 23 | { 24 | "content": "The page should be responsive on different screen sizes." 25 | }, 26 | { 27 | "content": "Deploy the solution and submit Repository URL and Demo URL." 28 | } 29 | ], 30 | "text": [ 31 | { "content": "Search movie" }, 32 | { 33 | "content": "Movie not found" 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /javascript-projects/multi-step-register-form.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Multi-step Register Form", 3 | "description": "This challenge offers a great opportunity to enhance your JavaScript skills by creating a 3-step registration form with distinct sections, allowing you to test and improve your JavaScript proficiency.", 4 | "userStories": [ 5 | { 6 | "content": "Create a multi-step registration page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add form, inputs, buttons, stepper,... according to the design." 13 | }, 14 | { 15 | "content": "Add validations to the inputs: name and email input should be required and email input should only accept email format." 16 | }, 17 | { 18 | "content": "Use Vanilla JavaScript to add interactivity." 19 | }, 20 | { 21 | "content": "Users should not be able to continue to the next step if inputs are empty or the topic is not selected." 22 | }, 23 | { 24 | "content": "Users can continue to the next step if inputs are filled or topic is selected." 25 | }, 26 | { 27 | "content": "Users should know which step they are at." 28 | }, 29 | { 30 | "content": "When users click confirm, they should see an alert with '✅ Success' message." 31 | }, 32 | { 33 | "content": "The page should be responsive on different screen sizes." 34 | }, 35 | { 36 | "content": "Deploy the solution and submit Repository URL and Demo URL." 37 | } 38 | ], 39 | "text": [ 40 | { "content": "Which topics you are interested in?" }, 41 | { 42 | "content": "Software Development" 43 | }, 44 | { "content": "User Experience" }, 45 | { "content": "Graphic Design" } 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /javascript-projects/music-player.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Music Player", 3 | "description": "This challenge is an excellent opportunity to enhance your JavaScript skills by creating a simple music player app that tests your data management capabilities using JavaScript..", 4 | "userStories": [ 5 | { 6 | "content": "Create a music player app that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add image, title, author, progress bar, player button,... according to the design." 13 | }, 14 | { 15 | "content": "Use vanilla JavaScript to add interactivity." 16 | }, 17 | { 18 | "content": "Users should be able to play and stop the current song." 19 | }, 20 | { 21 | "content": "Users should be able to go to next and previous songs." 22 | }, 23 | { 24 | "content": "Users should be able to change play time with the progress bar." 25 | }, 26 | { 27 | "content": "The page should be responsive on different screen sizes." 28 | }, 29 | { 30 | "content": "Deploy the solution and submit Repository URL and Demo URL." 31 | } 32 | ], 33 | "text": [ 34 | { "content": "Lost in the City Lights" }, 35 | { 36 | "content": "Cosmo Sheldrake" 37 | }, 38 | { "content": "Forest Lullaby" }, 39 | { "content": "Lesfm" } 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /javascript-projects/qa-code-generator.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "QR Code Generator App - QACODE", 3 | "description": "This challenge provides an excellent opportunity to practice your JavaScript skills by creating a simple QR code generator application that requires the use of an external library.", 4 | "userStories": [ 5 | { 6 | "content": "Create a QR code generator app that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add inputs, buttons,.. according to the design." 13 | }, 14 | { 15 | "content": "Use vanilla JavaScript to add interactivity." 16 | }, 17 | { 18 | "content": "Users can enter a URL." 19 | }, 20 | { 21 | "content": "User can see a QR quote after selecting the QR code button." 22 | }, 23 | { 24 | "content": "User can download QR quote image by selecting download button." 25 | }, 26 | { 27 | "content": "User can copy Quote to the clipboard by selecting Share button." 28 | }, 29 | { 30 | "content": "The page should be responsive on different screen sizes." 31 | }, 32 | { 33 | "content": "Deploy the solution and submit Repository URL and Demo URL." 34 | } 35 | ], 36 | "text": [ 37 | { "content": "Enter an url" }, 38 | { 39 | "content": "Download" 40 | }, 41 | { 42 | "content": "Share" 43 | } 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /javascript-projects/random-quote.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Random Quote", 3 | "description": "This challenge is an excellent opportunity to gain practical experience in utilizing external APIs within your application. The task involves creating a straightforward application for generating random quotes, which will necessitate the use of an external API.", 4 | "userStories": [ 5 | { 6 | "content": "Create a random quote app that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add author name, quote, tag,.. according to the design." 13 | }, 14 | { 15 | "content": "Use vanilla JavaScript to add interactivity." 16 | }, 17 | { 18 | "content": "Users can see a random quote when they first visit the page." 19 | }, 20 | { 21 | "content": "Users can see a random quote after they select the random button." 22 | }, 23 | { 24 | "content": "Users can copy the quote to the clipboard." 25 | }, 26 | { 27 | "content": "The page should be responsive on different screen sizes." 28 | }, 29 | { 30 | "content": "Deploy the solution and submit Repository URL and Demo URL." 31 | } 32 | ], 33 | "text": [] 34 | } 35 | -------------------------------------------------------------------------------- /others/privacy-policy.md: -------------------------------------------------------------------------------- 1 | ### Privacy Policy for devChallenges 2 | 3 | At devChallenges, accessible from https://devchallenges.io/, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that are collected and recorded by devChallenges and how we use it. 4 | If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us. 5 | This Privacy Policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in devChallenges. This policy is not applicable to any information collected offline or via channels other than this website. 6 | 7 | #### Consent 8 | 9 | By using our website, you hereby consent to our Privacy Policy and agree to its terms. 10 | 11 | ##### Information we collect 12 | 13 | The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information. 14 | If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide. 15 | When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number. 16 | 17 | ##### How we use your information 18 | 19 | We use the information we collect in various ways, including to: 20 | 21 | - Provide, operate, and maintain our website 22 | - Improve, personalize, and expand our website 23 | - Understand and analyze how you use our website 24 | - Develop new products, services, features, and functionality 25 | - Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes 26 | - Send you emails 27 | - Find and prevent fraud 28 | 29 | #### Log Files 30 | 31 | DevChallenges follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information. Our Privacy Policy was created with the help of the Privacy Policy Generator and the Online Privacy Policy Generator. 32 | 33 | #### Cookies and Web Beacons 34 | 35 | Like any other website, devChallenges uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information. 36 | For more general information on cookies, please read "What Are Cookies". 37 | 38 | #### Our Advertising Partners 39 | 40 | Some of the advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has its own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below. 41 | 42 | #### Advertising Partners Privacy Policies 43 | 44 | You may consult this list to find the Privacy Policy for each of the advertising partners of devChallenges. 45 | Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on devChallenges, which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit. 46 | Note that devChallenges has no access to or control over these cookies that are used by third-party advertisers. 47 | 48 | #### Third Party Privacy Policies 49 | 50 | DevChallenges Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt out of certain options. 51 | You can choose to disable cookies through your individual browser options. More detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites. 52 | 53 | #### CCPA Privacy Rights (Do Not Sell My Personal Information) 54 | 55 | Under the CCPA, among other rights, California consumers have the right to: 56 | Request that a business that collects a consumer's personal data disclose the categories and specific pieces of personal data that a business has collected about consumers. 57 | Request that a business delete any personal data about the consumer that a business has collected. 58 | Request that a business that sells a consumer's personal data, not sell the consumer's personal data. 59 | If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us. 60 | 61 | #### GDPR Data Protection Rights 62 | 63 | We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following: 64 | The right to access: You have the right to request copies of your personal data. We may charge you a small fee for this service. 65 | The right to rectification: You have the right to request that we correct any information you believe is inaccurate. You also have the right to request that we complete the information you believe is incomplete. 66 | The right to erasure: You have the right to request that we erase your personal data, under certain conditions. 67 | The right to restrict processing: You have the right to request that we restrict the processing of your personal data, under certain conditions. 68 | The right to object to processing: You have the right to object to our processing of your personal data, under certain conditions. 69 | The right to data portability: You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions. 70 | If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us. 71 | 72 | #### Children's Information 73 | 74 | Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity. 75 | DevChallenges does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records. 76 | Further information, contact devChallenges at thu.nghiem@devchallenges.io 77 | -------------------------------------------------------------------------------- /others/terms-and-conditions.md: -------------------------------------------------------------------------------- 1 | ### Terms and Conditions for devChallenges 2 | 3 | By accessing this web site, you are agreeing to be bound by these web site Terms and Conditions of Use. If you do not agree with any of these terms, you are prohibited from using or accessing this site. 4 | 5 | #### Use License 6 | 7 | Permission is granted to temporarily download one copy of the materials (information or software) on devchallenge.io's web site for personal, non-commercial transitory viewing only. 8 | This license shall automatically terminate if you violate the restrictions and may be terminated by devChallenges at any time. 9 | 10 | #### Disclaimers 11 | 12 | You accept all risks of using the website and content on the website. As far as the law allows, we provide the website as is, without any warranty whatsoever. The website may hyperlink to and integrate websites and services run by others. We do not make any warranty about services run by others, or content they may provide. Use of services run by others may be governed by other terms between you and the one running the service. 13 | 14 | #### Limits on Liability 15 | 16 | In no event shall devChallenges or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption,) arising out of the use or inability to use the materials on devChallenges' site 17 | 18 | #### Termination 19 | 20 | Either you or we may end the agreement written out in these terms at any time. When our agreement ends, your permission to use the website also ends. 21 | 22 | #### Copyright / Takedown 23 | 24 | Users agree and certify that we have rights to share all content that they post on devchallenges.io — including, but not limited to, discussions, information posted in solutions, and feedback. This rule applies to prose, code snippets, collections of links, etc. Regardless of citation, users may not post copy and pasted content that does not belong to them. Users assume all risk for the content they post, including someone else's reliance on its accuracy, claims relating to intellectual property, or other legal rights. 25 | 26 | #### Trademarks 27 | 28 | All uses of the devChallenges logo, badges, slogans may only be used with express permission from devChallenges. devChallenges reserves all rights. 29 | -------------------------------------------------------------------------------- /paths.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Responsive Web Developer", 4 | "dcid": 1, 5 | "description": "This path is designed for you to practice HTML, CSS, and basic JavaScript. You can practice with frameworks like Tailwind CSS, Bootstrap,... based on your need.", 6 | "free": 5, 7 | "premium": 3, 8 | "nextChallenge": null, 9 | "slug": "responsive-web-developer" 10 | }, 11 | { 12 | "name": "JavaScript Developer", 13 | "dcid": 2, 14 | "description": "In this path, it's not yet recommended to use any Frontend libraries like React, but instead, you should practice the fundamentals of JavaScipt like Document Object Model (DOM), Algorithms, Events, and Fetch API,...", 15 | "free": 5, 16 | "premium": 2, 17 | "nextChallenge": null, 18 | "slug": "javascript-developer" 19 | }, 20 | { 21 | "name": "Frontend Developer", 22 | "dcid": 3, 23 | "description": "This path is the place where you practice popular frameworks that are required in almost every Frontend job like React, Vue.js, and Svelte,...", 24 | "free": 5, 25 | "premium": 5, 26 | "nextChallenge": null, 27 | "slug": "frontend-developer" 28 | }, 29 | { 30 | "name": "Fullstack Developer", 31 | "dcid": 4, 32 | "description": "In this path, you are expected to implement both the front end and the back end of a website. You can build your own backend services with MEAN Stack (MongoDB, Express.js, AngularJS, Node.js) or tools like Supabse, Firebase,.. to speed up.", 33 | "free": 4, 34 | "premium": 2, 35 | "nextChallenge": null, 36 | "slug": "fullstack-developer" 37 | } 38 | ] 39 | -------------------------------------------------------------------------------- /responsive-web-projects/advanced-homepage-huffie.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Advanced Homepage - Huffie", 3 | "description": "This challenge will put your HTML and CSS skills to the test. The challenge is to create a more complex homepage with different sections. You will have to use all your HTML and CSS skills.", 4 | "userStories": [ 5 | { 6 | "content": "Create an advanced homepage - Huffie that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add logo, title, descriptions, buttons, images, etc., according to the design." 13 | }, 14 | { 15 | "content": "Use CSS or CSS framework to style the page." 16 | }, 17 | { 18 | "content": "The page should be responsive on different screen sizes." 19 | }, 20 | { 21 | "content": "Deploy the solution and submit Repository URL and Demo URL." 22 | } 23 | ], 24 | "text": [ 25 | { "content": "Version 4.0.1" }, 26 | { 27 | "content": "Where data and creativity come together." 28 | }, 29 | { 30 | "content": "The fastest way to build and deploy websites with reusable components." 31 | }, 32 | { "content": "This is a new creative process" }, 33 | { "content": "Quisque eleifend velit vel erat fringilla interdum" }, 34 | { "content": "200+ cloneable components" }, 35 | { "content": "Complete style guide for projects" }, 36 | { "content": "Modern & beautiful landing page" }, 37 | { "content": "Built-in multiple ways" }, 38 | { 39 | "content": "Suspendisse id tortor venenatis, blandit lacus ut, efficitur diam. Proin vulputate nisl vel sem consequat euismod. " 40 | }, 41 | { 42 | "content": "From navigation bars to modals, buttons to forms, our library has everything you need to jumpstart your development process." 43 | }, 44 | { "content": "Rapidly build your own design system" }, 45 | { "content": "Maintain consistency across your website" }, 46 | { "content": "Save hours in production time" }, 47 | { 48 | "content": "A comprehensive style guide can make all the difference in creating a cohesive and effective design." 49 | }, 50 | { "content": "Determine the key elements of your brand" }, 51 | { "content": "Include guidelines for layout" }, 52 | { "content": "Share your style guide with your team" }, 53 | { 54 | "content": "Our approach to content creation allows you to build your content in multiple ways, maximizing your efficiency and output." 55 | }, 56 | { "content": "Identify the core message of your content" }, 57 | { "content": "Create a content calendar" }, 58 | { "content": "Repurpose your content by adapting" }, 59 | { "content": "Always with the legendary customer experience." } 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /responsive-web-projects/business-blog-card.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Business Blog Card", 3 | "description": "This challenge is a great way to practice basic HTML and CSS skills. The challenge is to create a business blog card that challenges you to use flexbox, positioning,...", 4 | "userStories": [ 5 | { 6 | "content": "Create a card component that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Use CSS to style the card." 13 | }, 14 | { 15 | "content": "Deploy the solution and submit Repository URL and Demo URL." 16 | } 17 | ], 18 | "text": [ 19 | { "content": "Perfect solution for small business" }, 20 | { 21 | "content": "Small businesses need to generate leads to grow. You can use tools like Ringy." 22 | }, 23 | { "content": "Amy Burgess" }, 24 | { "content": "Customer Manger, Solution Oy" } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /responsive-web-projects/contact-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Contact Page", 3 | "description": "This challenge is to practice form and responsive design with HTML and CSS skills. The challenge is to create a contact page that you need to work with form, inputs,..", 4 | "userStories": [ 5 | { 6 | "content": "Create a contact page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add icon, heading, description, form, input, dropdown, button,.. according to the design." 13 | }, 14 | { 15 | "content": "Inputs should have placeholders." 16 | }, 17 | { 18 | "content": "Dropdown should have at least 2 options, it's up to you which more options to add but the default must be same as in the design." 19 | }, 20 | { 21 | "content": "Use CSS or CSS frameworks to style the card." 22 | }, 23 | { 24 | "content": "The page should be responsive on different screen sizes." 25 | }, 26 | { 27 | "content": "Deploy the solution and submit Repository URL and Demo URL." 28 | } 29 | ], 30 | "text": [ 31 | { "content": "Interested in our business pricing?" }, 32 | { 33 | "content": "Fill out the form to view details and we’ll contact you as soon as possible." 34 | }, 35 | { "content": "Ethan Johnson" }, 36 | { "content": "ethan@johnson.com" }, 37 | { "content": "Building Landing pages" }, 38 | { "content": "Contact Sales" } 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /responsive-web-projects/faq-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "FAQ Page", 3 | "description": "This challenge is a great way to start using JS with HTML and CSS. The challenge is to create a FAQ page that challenges you to use JavaScript to modify basic elements", 4 | "userStories": [ 5 | { 6 | "content": "Create a FAQ page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add heading, description, tabs, accordions,.. according to the design." 13 | }, 14 | { 15 | "content": "User should be able to select different tabs." 16 | }, 17 | { 18 | "content": "User should be able to toggle accordions open and close. The content of each accordion is up to you but 2 accordions should be open default, same as in design." 19 | }, 20 | { 21 | "content": "Use CSS or CSS frameworks to style the card." 22 | }, 23 | { 24 | "content": "The page should be responsive on different screen sizes." 25 | }, 26 | { 27 | "content": "Deploy the solution and submit Repository URL and Demo URL." 28 | } 29 | ], 30 | "text": [ 31 | { "content": "Frequently asked questions" }, 32 | { 33 | "content": "Products, Website or Brand Design, we’ve got you covered!" 34 | }, 35 | { 36 | "content": "Give us your questions, and we can help you achieve our goals together!" 37 | }, 38 | { "content": "How does it work?" }, 39 | { "content": "Which platform do you support?" }, 40 | { 41 | "content": "In a situational interview, the interviewer may ask how you overcame a difficult situation and what you learned from it. You can use your response to demonstrate your flexibility and share an example of how you transformed a negative experience into a positive outcome " 42 | }, 43 | { "content": "How do I invite my teammates?" }, 44 | { 45 | "content": "Collect the contact information of your teammates, including their email addresses or usernames on the platform you will use." 46 | }, 47 | { "content": "Do you have annual plan?" }, 48 | { "content": "How to create new workspace" }, 49 | { "content": "How do I set roles & permissions?" } 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /responsive-web-projects/portfolio-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Portfolio Page", 3 | "description": "This challenge is to test your skills with a more complex layout. The challenge is to create a portfolio page that you will need to practice using grid, flexbox, media queries,..", 4 | "userStories": [ 5 | { 6 | "content": "Create a portfolio page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add heading, descriptions, images, sections,.. according to the design." 13 | }, 14 | { 15 | "content": "User should be able to navigate to different sections with top navigation." 16 | }, 17 | { 18 | "content": "Use CSS to style the card." 19 | }, 20 | { 21 | "content": "The page should be responsive on different screen sizes." 22 | }, 23 | { 24 | "content": "On mobile, users should be able to toggle side navigation." 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /responsive-web-projects/process-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Process Page", 3 | "description": "This challenge is to practice responsive design with HTML and CSS skills. The challenge is to create a process page that you need to work with different break-points.", 4 | "userStories": [ 5 | { 6 | "content": "Create a process page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add heading, descriptions, icons,.. according to the design." 13 | }, 14 | { 15 | "content": "Add dashed lines to separate different sections." 16 | }, 17 | { 18 | "content": "Use CSS to style the card." 19 | }, 20 | { 21 | "content": "The page should be responsive on different screen sizes." 22 | }, 23 | { 24 | "content": "Deploy the solution and submit Repository URL and Demo URL." 25 | } 26 | ], 27 | "text": [ 28 | { "content": "Easy And Perfect Solution For Your Business App" }, 29 | { 30 | "content": "Save time and build products with well-organized and customizable desktop components for Figma." 31 | }, 32 | { 33 | "content": "Developer handoff made easy. Component and style guide documentation for your team in one place." 34 | }, 35 | { 36 | "content": "Stop wasting time on creating everything from scratch for every new project you start." 37 | }, 38 | { 39 | "content": "Easily apply your branding by changing font, color and component properties." 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /responsive-web-projects/simple-blog-card.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Minimal Blog Card", 3 | "description": "This challenge is a great way to start with basic HTML and CSS skills. The challenge is to create a simple blog card that includes an image, a title, a short description, and a tag.", 4 | "userStories": [ 5 | { 6 | "content": "Create a card component that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Use CSS to style the card." 13 | }, 14 | { 15 | "content": "Deploy the solution and submit Repository URL and Demo URL." 16 | } 17 | ], 18 | "text": [ 19 | { "content": "Embracing Minimalism" }, 20 | { 21 | "content": "From minimalist sculptures to minimalist paintings, this blog will inspire you to appreciate the beauty that lies in simplicity." 22 | }, 23 | { "content": "Annie Spratt" } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /responsive-web-projects/simple-homepage.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Simple Homepage - Alarada", 3 | "description": "This challenge is a great way to start using JS with HTML and CSS. The challenge is to create a FAQ page that challenges you to use JavaScript to modify basic elements", 4 | "userStories": [ 5 | { 6 | "content": "Create a simple homepage page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add logo, heading, description, links, buttons,.. according to the design." 13 | }, 14 | { 15 | "content": "User should be able to toggle between light and dark mode (light as default)." 16 | }, 17 | { 18 | "content": "Use CSS or CSS frameworks to style the card." 19 | }, 20 | { 21 | "content": "The page should be responsive on different screen sizes." 22 | }, 23 | { 24 | "content": "On mobile, users should be able to toggle side navigation." 25 | } 26 | ], 27 | "text": [ 28 | { "content": "😎 Simple way to communicate" }, 29 | { 30 | "content": "Actions for Accessibility in Design" 31 | }, 32 | { 33 | "content": "The fastest way to build and deploy websites with resusable components." 34 | }, 35 | { "content": "No credit card required" }, 36 | { "content": "No software to install" } 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /responsive-web-projects/testimonial-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Testimonial Page", 3 | "description": "This challenge is to practice more advanced HTML and CSS skills. The challenge is to create a simple testimonial page that you need use grid, media queries, icons,...", 4 | "userStories": [ 5 | { 6 | "content": "Create a testimonial page that matches the given design." 7 | }, 8 | { 9 | "content": "Use HTML to create the basic structure." 10 | }, 11 | { 12 | "content": "Add heading, body text, checklists according to the design." 13 | }, 14 | { 15 | "content": "Add 2 testimonial cards according to the design." 16 | }, 17 | { 18 | "content": "Use CSS to style the card." 19 | }, 20 | { 21 | "content": "The page should be responsive on different screen sizes." 22 | }, 23 | { 24 | "content": "Deploy the solution and submit Repository URL and Demo URL." 25 | } 26 | ], 27 | "text": [ 28 | { "content": "⭐️" }, 29 | { 30 | "content": "Reviewers is where people can access guidelines, checklists, and other tools to assist them in reviewing papers or manuscripts. It provides a structured approach to ensure that the review process is thorough, efficient, and consistent." 31 | }, 32 | { 33 | "content": "Checklist to Review an Academic Paper" 34 | }, 35 | { "content": "Peer Review Checklist" }, 36 | { 37 | "content": "Checklist for Editors, Reviewers, and Authors of SPIE Journals" 38 | }, 39 | { 40 | "content": "Samantha Lee" 41 | }, 42 | { 43 | "content": "The checklist ensures that the review process is thorough" 44 | }, 45 | { 46 | "content": "Rachel Patel" 47 | }, 48 | { "content": "I highly recommend the Writecream Business Description" } 49 | ] 50 | } 51 | --------------------------------------------------------------------------------