Personal Coding Projects for Aspiring Developers
Written on
Introduction
It is widely acknowledged that engaging in personal projects is crucial for novice developers. While many in the field share stories of their personal endeavors, few can showcase tangible results. Here, we present three project ideas that, although cost-free to implement, may significantly boost your employability!
Project 1: Create a Static Blog
At first glance, this project may not seem particularly exciting, but it is entirely your own. The intention here isn't to create a blog for public posting; if that's your aim, consider using platforms like Medium or WordPress for quicker publication. Instead, your focus should be on practicing the setup of a site using a static site generator such as Next.js, Gatsby, or Nuxt, and deploying it on a hosting service. This blog will be live, allowing you to share the frontend and access your content management system with potential employers.
In this endeavor, you'll learn to manipulate an API with access control, generate a static site using your chosen framework, and deploy your application through the terminal.
Prerequisites
To embark on this personal project, familiarity with React or Vue and the ability to segment your code into components is essential. Additionally, you must know how to make API calls.
Suggested Stack:
- Gatsby or Next.js for React
- Nuxt for Vue
- TailwindCSS or another CSS library for styling
- Contentful API for your CMS
- Vercel or Netlify for deployment
MVP Features
- Display a list of articles, each with a title, body, and tags.
- Present a full-page view of individual articles (title, body, and tags).
- Ensure responsive design across the page width without any additional CSS styling.
Version 1 Features
- Create an author page that includes a photo and a brief bio, using Contentful for content.
- Add a cover image for each article, displayed in the article list and on individual pages.
- Style your blog with components from Tailwind or another CSS library.
- Implement a tagging system to group articles by their tags.
Additional Features
- Include a horizontal or vertical "hamburger" menu for smaller screens.
- Implement automated testing using Jest.
The challenge here lies not in using cutting-edge technology, but in demonstrating your proficiency with React or Vue, creating reusable components, and organizing API calls.
The first video titled "3 Types of Projects That Will Make You a Programmer" discusses various project types that can enhance your programming skills and employability.
Project 2: Develop a News Site
Creating a news site involves regularly retrieving data and updating your frontend. While using a Static Site Generator might not initially appear suitable, it's still a viable option. There are multiple ways to gather news: you can utilize APIs that provide news updates or scrape headlines from established news websites.
Prerequisites
Similar to the previous project, you should possess a solid understanding of JavaScript along with React or Vue to succeed in this project.
Suggested Stack:
- Next.js or Nuxt for Server-Side Rendering
- Express.js API for backend integration with React or Vue for the frontend
- TailwindCSS or another CSS framework for styling
- Puppeteer for web scraping if needed
MVP Features
- Retrieve news from an API.
- Display titles, authors, and descriptions of news articles.
- Develop a responsive interface using Tailwind components or another CSS library.
Version 1 Features
- Implement a filtering option for news sources.
- Sort news articles in descending order.
Additional Features
- Scrape popular news sites to enhance your feed.
- Regularly fetch news updates from various sources to ensure fresh content without requiring page refreshes (consider using socket.io for real-time updates).
Project 3: Rebuild Lodash
This project presents a pure algorithmic challenge that will test your JavaScript knowledge. Although lacking a frontend aspect, it provides an excellent opportunity to improve your coding skills and showcase your JavaScript expertise to potential employers.
For this project, you have the freedom to select the functions you wish to recreate. Refer to the Lodash documentation for guidance and start coding. You can consolidate all your functions into a single JavaScript file.
The key challenge lies not in the initiation of the project but in its completion. Focus on delivering a project that demonstrates your capabilities to future employers, rather than worrying about the design aspects.
More content at plainenglish.io
The second video titled "21 Programming Project Ideas (Beginner to Advanced)" provides a comprehensive list of project ideas suited for developers at any stage of their journey.