Light

nauvalazhar / code-design Goto Github PK

View Code? Open in Web Editor NEW

196.0 3.0 30.0 138.99 MB

Level up your coding skills with hands-on design challenges.

Home Page: https://codedesign.dev/

License: MIT License

JavaScript 2.30% CSS 3.01% Shell 0.30% TypeScript 94.39%

challenges front-end nextjs react

code-design's Introduction

codedesign.dev

As a developer, it's important to continually challenge yourself and improve your skills. Code The Design was created with this goal in mind. We believe that the best way to learn and grow is by tackling real-life projects and challenges, rather than just following along with tutorials or practicing with contrived exercises.

That's why we've created a platform that offers a wide variety of challenges, inspired by real-world designs and use cases. These challenges are meant to push you to think creatively, problem-solve, and develop your skills as a developer.

We understand that everyone has different levels of experience and expertise, which is why we've included a subjective difficulty rating for each challenge. This allows you to choose challenges that are appropriate for your current skill level, and gradually work your way up as you improve.

We also understand that the website is in a very early stage and far from being stable (see our roadmap). Our focus is on getting the website visible as soon as possible, which is why we don't currently offer pre-exported assets and specific objectives for the challenges. However, we provide Figma design files for each challenge, which you can learn how the designs work and use to export any assets you need.

We hope that Code The Design will serve as a valuable resource for you as you work to improve your skills and become a more confident and capable developer. Happy coding!

Contributors

_Nauval 💻 🎨 🤔 📖	_{Wisnu Wicaksono} 💻 🎨	_{Fiqry choerudin} 💻	_{Achmad Rivaldi} 💻	_Perdi 💻 🎨 📖	_{Hendra Agil} 💻	_{Abdul Malik} 💻
_ハキム 💻	_Yusuf 💻 🎨	_{M. Mahdani Rahmatullah} 💻	_{Alfan Jauhari} 💻	_Seya 💻

UI Designers


_Nauval _{Visit Profile}	_{Taufik Hidayatulloh} _{Visit Profile}	_{Mahyu Aspant} _{Visit Profile}	_{Muhammad Fauzan Alkhairi} _{Visit Profile}	_{Rafiq Al Hafizh Adha} _{Visit Profile}	_{Syauqizaidan Khairan Khalaf} _{Visit Profile}	_{Yohana Marlina} _{Visit Profile}

_{Dimas Rizky Maulana} _{Visit Profile}	_{Glenn Vhalado} _{Visit Profile}	_{BrainStew Studio} _{Visit Profile}	_{Irham Shidiq} _{Visit Profile}	_{Dzaki Muzhaffar} _{Visit Profile}	_{Muhammad Afin} _{Visit Profile}	_Arie _{Visit Profile}

_{Irvan Moses} _{Visit Profile}	_{Muhammad Alfian} _{Visit Profile}

Contributing

See our contributing document for more information and UI design contributions, please consult the UI Design Contribution Guideline document.

License

code-design's People

Contributors

Stargazers

Watchers

code-design's Issues

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Al Nasr - Website Al Hajj and Umrah

Figma Community URL
Your UI design URL to the Figma community.

Your Figma Profile
The URL of your Figma profile. For example, https://figma.com/@rafiqadha

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Omah - Real Estate Website Design
Your UI design project name. Must be short.

https://www.figma.com/community/file/1213834016475813705
Your UI design URL to the Figma community.

https://www.figma.com/@dzakiimuzh
The URL of your Figma profile. For example, https://figma.com/@mhd

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Online Learning Landing Page

Figma Community URL
https://www.figma.com/community/file/1029023791566203786

Your Figma Profile
https://figma.com/@irvan

[Feature] Adding OG metadata for improve viewer

Is your feature request related to a problem? Please describe.

No, i think if we adding og metadata its nice to have when paste a link and the crawl will be show metadata
that mean for improve view when user see metadata in every crawl platform like facebook, twitter, discord

what about you @nauvalazhar

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
TAILOR

Figma Community URL
https://www.figma.com/community/file/1222591392920510949

Your Figma Profile
https://figma.com/@ariar

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Hangeulin

Figma Community URL
https://www.figma.com/community/file/1207962513945950554

Your Figma Profile
https://www.figma.com/@muhammadfauzana

[Feature] Feature by Categories

Is your feature request related to a problem? Please describe.
When I want to search for some design, but I want to concern to find Category Page Only

Describe the solution you'd like
Make button row by Category at button after difficult option.

Describe alternatives you've considered
..

Additional context
I want to contribute the feature if you agree to my feature

[Feature] Responsive web design

Currently, the website is not friendly for mobile users. Let's make the website responsive.

[Feature] Dynamic title each page

Each page should have a corresponding title according to its content.

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Eventnity - Landing Page Ticket UI Design

Figma Community URL
https://www.figma.com/community/file/1210265697580558125

Your Figma Profile

Typescript?

New UI Design Contribution

Name
Destinize

Figma Community URL
https://www.figma.com/community/file/1210601516714970320

Figma Community Profile
https://figma.com/@syaufy

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Clone Netflix

Figma Community URL
https://www.figma.com/community/file/1207958204889189717

Your Figma Profile
https://www.figma.com/@muhammadfauzana

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
DressLy

Figma Community URL
https://www.figma.com/community/file/1231249131456152871

Your Figma Profile
https://figma.com/@muhammadfauzana

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Lidia

Figma Community URL
https://www.figma.com/community/file/1334838385104638513

Your Figma Profile
https://figma.com/@alpi

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Team Collaboration Landing Page

Figma Community URL
https://www.figma.com/community/file/1033884363291199985

Your Figma Profile
https://figma.com/@irvan

Reduce image size

Is your feature request related to a problem? Please describe.
As mentioned in #65, images are all in full resolution of over 1k pixels and averaging ~3MB, loading them are painfully slow and consumes a lot of bandwidth.

Describe the solution you'd like
Crop with the recommended 2:1 aspect ratio (eg: 1200 x 600 pixels).

Describe alternatives you've considered
Resize and compress every challenge images.

Additional context
I found that the images serve no purpose other than as thumbnails in the landing page, the challenge page uses Figma for the preview anyway.

This would also help future contributors by reducing the repository size (yay)

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Agenone - Creative Digital Agency Landing Page

Figma Community URL
https://www.figma.com/community/file/1220307995673140735

Your Figma Profile
https://figma.com/@maafin_ui

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Suxz

Figma Community URL
https://www.figma.com/community/file/1211276735395024758

Your Figma Profile
https://figma.com/@irhammshidiq

[Feature] Can be scrolled up using back-to-top button

Is your feature request related to a problem? Please describe.
Sometimes feels frustrated when it's already at the bottom and want to back to top of the page.

Describe the solution you'd like
Back-to-top button may help this problem

Describe alternatives you've considered

Additional context

"Malaka" is a swear word in Greek

Was kind of funny to me, being Greek, but just thought I'd let you know. ;)

https://translate.google.com/?sl=el&tl=en&text=malaka&op=translate

[Feature] Submission & XP System

Let's have the submission page and the XP system to make the challenge more engaging.

Submission is a page that would allow the dev to upload their challenge's solution. Each submission contains at least a description, demo URL, and tech stack information.

All the submissions would go through the approval system, and after the submission is approved, the dev would earn some XPs.

I still don't have any idea about the tech that we can use, but I think the GitHub repository's issues API would be the easier way to implement. But, we still need to find a way to store the user's XP data.

I don't want to build an entire back-end infrastructure only for this feature to be implemented.

Some other advanced options:

Let's have a discussion.

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
TAILOR

Figma Community URL
https://www.figma.com/community/file/1222591392920510949

Your Figma Profile
https://figma.com/@ariar

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Agency Landing Page

Figma Community URL
Your UI design URL to the Figma community.

Your Figma Profile
The URL of your Figma profile. For example, https://figma.com/@glennvhalado

Roadmap

We won't release the v1.0.0 version until some features are already implemented:

Update:
Since we use a new Next.js 13 App Dir, we should wait for the stable release.

[Feature] Pre-exported assets & specification section

Each design challenge should have a button to download all pre-exported assets, it would be easier for the dev, and no need to export all the assets on their own.

Todo:

Update

We need a specification section as well for each design. That section contains the following entities:

Typography
Container width
Grid information
Colors

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Construction Landing Page | Jhontraktor Clone

Figma Community URL
https://www.figma.com/community/file/1209577571885853711

Your Figma Profile
https://figma.com/@brainstewstudio

New UI Design Contribution

Make sure you have read our contributing guidelines before submitting this issue.

Name
Agencys - Landing Page UI Design

Figma Community URL
(https://www.figma.com/community/file/1208800587833558237)

Your Figma Profile
The URL of your Figma profile. https://www.figma.com/@rafiqadha

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.