The Secret to Being a Top Developer Is Building Things

Becoming a great developer isn’t just about reading tutorials or watching videos. Just like getting fit requires hitting the gym, improving your coding skills requires hands-on practice.

Here are eight projects that will help you train your coding muscles. You can build each one with the technology stack of your choice, allowing you to focus on the skills that matter most.

1. Trello Clone

What You’ll Learn:

1. Routing: Implement navigation between different sections of your app.
2. Drag and Drop: Allow users to drag and drop items like cards or lists.
3. Creating Objects: Learn to create new boards, lists, and cards dynamically.
4. Handling Inputs and Validation: Ensure data input is clean and error-free.
5. Client-Side Storage: Save and retrieve data using local storage.
6. Server-Side Storage: Work with databases to persist data.

Example Project: Simple Trello Clone on GitHub by Trevor Indrek Lasn

2. User Admin Dashboard

What You’ll Learn:

1. User Management: Create, read, update, and delete users in a database.
2. Form Handling: Validate user inputs and handle form submissions.
3. Database Interaction: Understand CRUD operations with a database.

Example Project: Dashboard

3. Cryptocurrency Tracker (Native Mobile App)

What You’ll Learn:

1. Native App Development: Use Swift, Objective-C, React Native, Java, or Kotlin.
2. API Interaction: Fetch real-time data from a cryptocurrency API.
3. Native Layouts: Design and implement native UI components.
4. Mobile Simulators: Test your app on different mobile devices.
5. API to Use: Find a suitable cryptocurrency API for fetching data.

Example Project: Cryptocurrency Tracker on GitHub

4. Custom Webpack Configuration

This project isn’t an app, but it’s crucial for understanding how Webpack works. You’ll go from Webpack being a “black box” to a powerful tool you can wield confidently.

What You’ll Learn:

1. Compiling ES7 to ES5: Convert modern JavaScript to a more widely supported version.
2. Working with Loaders: Transform JSX/Vue files into JavaScript.
3. Webpack Dev Server: Set up hot module reloading for fast development.
4. Production Builds: Create production-ready builds and deploy them.
5. CSS Preprocessors: Compile SCSS, Less, or Stylus into plain CSS.
6. Handling Assets: Use images and SVGs with Webpack.

Getting Started Guide: Webpack for Beginners

5. Hacker News Clone

What You’ll Learn:

1. API Interaction: Fetch and display data from the Hacker News API.
2. Single-Page Apps: Build a seamless user experience without page reloads.
3. Features Implementation: Implement features like viewing comments and user profiles.
4. Routing: Navigate between different sections of the app.
5. API Documentation: Hacker News API Documentation

6. To-Do App

Yes, a to-do app! It’s popular for a reason—it’s a great way to master the fundamentals.

What You’ll Learn:

1. Task Creation: Add new tasks to your to-do list.
2. Input Validation: Ensure fields are correctly filled out before submission.
3. Task Filtering: Implement features to filter tasks by status (e.g., completed, active).
4. JavaScript Fundamentals: Strengthen your core JavaScript skills.

7. Sortable Drag and Drop List

Understanding drag and drop APIs will make your UIs stand out. This project will push your skills in creating interactive and dynamic interfaces.

What You’ll Learn:

1. Drag and Drop API: Implement drag-and-drop functionality within your app.
2. Rich UIs: Create visually appealing and functional interfaces.

8. Messenger Clone (Native App)

Building a messenger clone will give you valuable insights into both native and web app development.

What You’ll Learn:

1. Web Sockets: Implement real-time messaging using web sockets.
2. Native App Development: Deepen your understanding of native mobile development.
3. Native Layouts: Learn about native UI design.
4. Routing in Native: Navigate between different screens in a native app.

Mastering these projects will not only flex your coding muscles but also prepare you to tackle more complex challenges in the future.

Remember, the journey to becoming a great developer isn’t about taking shortcuts—it’s about embracing the process, learning from your mistakes, and building something every day. So pick a project, dive in, and start coding your way to greatness. Who knows? Your next project could be the one that sets you apart from the rest.

Keep pushing the boundaries, and happy coding! 🚀