Everyone knows that project based learning is best. Endless diving in tutorials might be good initially but if you can’t build a project all by yourself, you have not learned much.
Real learning requires practice and whether you want to improve your skills or build a portfolio to get a programming job, the best way to practice is to build projects. Now, what projects you should build is another good question that I will try to answer in this article.
While there’s no universal answer to what kind of projects one should build when learning to code, there are definitely some good project categories and ideas that we are going to discuss in this article.
These projects will help you upskill yourself and create a portfolio of projects as a web developer or mobile app developer that you can show to your future employers in interviews. So without further ado, let’s get started:
Web portfolio projects
1. Landing page
All great products on the internet have their own landing page. As a web developer, knowing how to build great landing pages is the most basic thing. This would require you to know how to build responsive websites and websites that have good design.
Landing pages are static so even if you just know HTML and CSS, you can come up with beautiful landing pages that demonstrate the product best. You can look up Frontend Mentor for landing page ideas.
2. API powered website
Most projects consume some API and if you are serious about building a career as a programmer, you must know how to consume APIs to build better projects.
There are endless ideas that you can make real with APIs. From fun Pokemon projects to Music streaming apps to AI projects(which will discuss later in the article) to whatnot, your creativity is the only limit to what you can build.
3. Clone website
A Clone website could be of any popular websites out there or the ones that you like and use the most. It could be anything like Facebook, YouTube, Instagram, Twitter, Amazon, etc., or even the not so popular ones given that they are somewhat complex to build.
If you can create a clone of such websites, it demonstrates that you can convert good designs into good code. Find what website you want to clone and start building. If you want to take it a step further, create a full-stack clone application with a frontend, API, and database.
4. CRUD application
Most websites have CRUD functionality enabled. CRUD operations allow users to create, read, update, and delete data. Blogs, e-commerce, social media, educational platforms, productivity apps, etc. all have some sort of CRUD functionality enabled.
There are lots of good project ideas under this category like a TO-DO list, Notes App, Chat App, E-Commerce, Social Media website, etc that you can build.
5. AI powered website
AI is booming in 2023 and the best part is that you don’t necessarily need advanced artificial intelligence knowledge to build AI projects. You can build something great on top of great AI APIs available on the internet like Open AI API etc.
Having an AI project in your portfolio is a great step to show your employers that you care about the latest technological developments and can make your way to learning the required skills.
6. Full Stack unique project
This is the sum total of all points we have discussed above. You have built landing pages, API-powered web apps, Clone web apps, CRUD apps, and maybe AI-powered web apps. Now, you have to combine all this and build a unique project. Here you will create a fully functional full-stack project along with a separate landing page. If you can also add AI to it, that would be an extra bonus.
This project should ideally be something you can relate to, an idea you find interesting, or a solution to a problem that you are facing. Once you have finalized the idea, brainstorm and document all the features that you want to add to the web app.
Now, you should start the building process, there are three steps to it:
- API endpoints: Create all the API endpoints you need and check if the data is getting saved properly in the database or not.
- Frontend: This is where all the users of your web app will land. So try to build the app with good UI/UX that users would love to use.
- Landing Page: The landing page doesn’t add anything to your product but it’s for the people who will come to use your project. So make sure, you spend a good time on it.
If you can build a big project like this nicely, it would serve as the best certification of your skills.
RELATED: Web Developer Portfolio Examples
Mobile portfolio projects
We have already discussed web projects and most of those project ideas can also be used in the context of apps like building a clone app, CRUD app, AI app, etc. But for this section, we are going to discuss specific project examples so that after you finish reading this article, you will have both specific ideas and broad categories that you can fit your projects under.
1. ECommerce app
ECommerce is rocking both on the web and mobile and we can’t ignore the massive size of this industry. Knowing how to build and maintain e-commerce apps is going to help you a lot as a mobile app developer.
To begin with, you can either clone an existing e-commerce app like Amazon, etc or you can build your own from scratch. Irrespective of what you choose, let’s see some key features that you must add to your app:
- Search for a product
- Add to cart and checkout
- Add your own products
- Past purchases
- Rate and review products
2. Diet tracker app
Diet Tracker app is an app with lots of potential. You can start this as a simple food logging app and eventually slowly make it bigger and better. Let’s see some features that you can add to this app, sooner or later:
- Food logging
- Find nutrients by searching the name of a recipe
- Diet plan for specific fitness goals
- Weight tracking
- Water reminder
- Progress tracking
3. Personal finance app
Managing finances is a gruesome task and what’s a better way to simplify it than with an app? Let’s discuss some features this app could have:
- Record income and expenses
- Different categories for income and expenses
- Can give tags to a transaction
- Budget planning
- Charts and graphs to view the cash flow, income, and expenses
- Can automate monthly income and fixed expenses
- Track your investments
While there’s no end to what you can add to this app, even if you implement the above features, that would make this app a solid project in your portfolio.
4. Movie review app
Apps like IMDb are really popular and fun to build. You have to create a similar app in this section and make sure that you definitely add the following features to it:
- Search for a movie
- Rate a movie
- Write review
- Read existing reviews
- Follow tags for various genres
- Read the description, cast, release date, budget, collection, etc.
While these features would be interesting to implement, don’t forget to differentiate yourself wherever you can. For instance, you can create a niche movie app like Sci-Fi, Comedy, Action, etc.
5. Photo editing app
Unlike other apps mentioned in this section, the Photo editing app is a little different and it will help to diversify the project categories in your portfolio. So, let’s see some features that you can add to the project:
- Enhancement options like contrast, brightness, etc.
- Create a collage
- Add borders and frames
- Filters like Grayscale, Lighten, Darken, etc.
- Reduce file size
- Remove background
- AI enhancement
6. Social networking app
Social Networking apps are everyone’s favourite and have a bright future. Building one such project will give your skills and portfolio great improvement and help you shine in front of your employer.
Let’s see some features that you can add to your app:
- Create posts with text and images
- Comment on other people’s posts
- Like/Upvote and Bookmark posts
- Follow other people based on interests
- Personalised feed
- AI-generated posts and images
The AI-generated posts and images are just an additional feature to spark up things that you can consider adding while the rest of the features are basic and you must add them to your project.
Now that the article is going to end, I hope you are filled with endless ideas for your upcoming projects. You have got both idea categories and specific examples that you can build whether you are a web developer or mobile app developer or both.
Make sure to spend good time on the user interface and user experience of these projects as they should be good enough to be used by real users, great design and experience is the key to acquiring more users to your users.
I hope you enjoyed this article, let me know which project are you going to choose to start your journey. Good luck!
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.