Here Are Some Projects You Can Do To Build Your JavaScript or any other programming language skill. I will tell you about various projects that you can do to make your programming skill more strong. These are beginner-level projects just to understand things like how to utilize APIs, Design UI & how to set functionality in web and mobile application. Build a project from scratch is a very good way to understand programming language or framework. Here I will talk about some projects that will help you to improve your programming skills. Projects You Can Do To Build Your programming Skills. These projects will boost your knowledge of programming language and framework if you used with language. Following are the projects you can try:
Here is the list of projects you can check for both UI and logic perspective-
->Make some sort of stripped-down Slack app.
what features you must need to implement:
People enter without authentication and are assigned a name, stored for when they come back.
Store the history.
Add notifications.
With this app, you will understand:
Web sockets (instant messaging)
How native apps work.
How layouts work in native.
Routing for native apps.
->Team management app-
Must implement these things:
Routing
Drag and drop
Create new objects (boards, lists, cards)
Handle inputs and validation
Client-side path: use local storage, saving data to the local storage, reading data from the local storage.
Server-side path: use databases, saving data to the database, reading data from the database.
-> coin flip web app
-> Make Unbeatable tic-tac-toe.
-> Electronic Simon Game-
It is a game presented with a random series of button presses.
Each time you input a set of button presses correctly, you see the same series of button presses but with an additional step.
you hear a sound that corresponds to each button both when the series of button presses plays, and when you press a button. if you press the wrong button you will be notified that you have done this wrong, and that series of button presses starts again to remind you of the pattern so you can try again.
User admin dashboard-
Simple CRUD app, great for fundamentals.
What you will learn:
Creating users, managing users,
Interacting with a database.
creating, reading, editing, deleting users.
Input validation and how to work with forms.
Hackernews clone-
What you will learn:
Interacting with the hacker news API.
Creating single-page apps
How to implement points such as viewing comments, single comments, profiles.
Routing.
List the popular posts
Show a post’s comments
Show a user’s profile
Search HN
A sortable drag and drop list-
What you will learn:
Drag and drop API
Creating rich UIs
usage insights-
It is all about how much time did the user spend on the app. Track every time the user login and user activities.
A weight tracker app-
It must have these features-
It accepts a set of standard entries of weight measurements taken at different dates.
It can plot a graph.
It can allow you to track multiple entities, for example, more than one person's weight.
It stores the weights somewhere.
A recipes app-
It must have a form in which you can Enter a name and a description with the steps and
Have some ranking for difficulty and quality and the user can also be able to upload pictures.
Add the time needed.
Have different steps with a picture for each.
Store them somewhere.
A meme generator:
Have 10 popular meme images
Let the user add the text
The result is image + text
Store the history
A blog engine:
Make some kind of forum engine.
Allow users to log in and add posts.
Visitors can add comments.
Store the data somewhere.
An Instagram client:
Enter a hashtag and get the latest posts.
Enter a username and get the latest posts.
Allow to store one or more hashtags/usernames and get all the latest posts from those.
A GitHub API client:
List the popular repositories from today/week/ month.
List the latest commits in a repository.
Show a person or company public repositories ranked by stars.
Add Profile search (in this you learn about how to fetch data from API)
An Unsplash API client:
Search images by topic. Let the user insert a term, show relevant images.
QA engine:
Allow user to login
Add questions
Answer to questions.
Allow the original user to choose the best question.
Store the data somewhere.
If you are working on native mobile app :
How native apps work.
Fetching data from an API.
How native layouts work.
How to work with mobile simulators.
automatic invoicing
robot validation in Forms:
For this, you need a registered domain
e-commerce: E-commerce Platform**
- A robust and scalable e-commerce platform designed for modern businesses. Create a model of a simple to use, low bandwidth mobile-based (responsive) e-commerce platform in which Data is catering different for different bandwidths.
Ticket reservation system:
Telephone directory listing:
Library management system
Essay writer app
Applications-
This project helps you in International exam preparation. Weight conversion app
Example- Do convert basic units
nmol to mg.
how many grams of silicone in 261 Cu cm?
Date calculator
Find the difference between the two dates
and many more use cases you can add
Around me application:
Develop an application which shows the closest places that are present near you like airport, ATM etc.
Blood Donation App for Rotary Blood bank
A Platform where Brands and Bloggers can create campaigns.
App for Coaches and Players (Football and Basketball) Appointment.
Burger Builder (customization to order)
Instagram Clone
2. Dice Rolling SImulation
-
Number Guessing
-
Website Blocker
-
Flappy Bird
developers can use the pygame package
You can structure the projects like this while showcasing your work-
sample description of projects with title and links-
Inlet (https://github.com/dericksozo/Emojional-Life ) -
An Emoji-focused Emotion Tracker that I created. The front-end is handled with Vue.js and the back-end is powered with PHP.
Kidizen Shop Filter (https://shop.kidizen.com/items ) -
The items filter on the Kidizen Shop website is powered with Vue.js front-end. The back-end is Ruby on Rails.
Remark (https://rrremark.com/ and https://github.com/dericksozo/rrremark-com/blob/master/assets/js/app.js) -
A personal note-taking/ todo application with drag n' drop functionality powered by a Vue.js frontend and Firebase Real-time Database for persistence.
Responsive Fashion Showcase (https://codepen.io/dericksozo/pen/MOZGQP) [JavaScript] -
A fully responsive page with a carousel to showcase what a fashion website could look like. It got about 2.3K views on Codepen.
Responsive Sports Ticket Search Website (https://codepen.io/dericksozo/pen/oEGYLw) -
The front-end UI for a responsive sports tickets search website powered using Vue.js and styled using Flexbox. The carousel is Flickity by David Desandro.
A Vue. js-powered Screenshot-taking UI (https://codepen.io/dericksozo/pen/yvXOmP) -
I created the front-end UI for what could become a Screenshot-taking
Tribute Page, Survey Form, Product Landing Page, Technical Documentation Page, Personal Portfolio Webpage
Palindrome Checker, Roman Numeral Converter, Caesars Cipher, Telephone Number Validator, Cash Register
Random Quote Machine, Markdown Previewer, Drum Machine, JavaScript Calculator
Bar Chart, Scatterplot Graph, Heat Map, Choropleth Map, Treemap Diagram
Timestamp Microservice, Request Header Parser, URL Shortener, Exercise Tracker, File Metadata Microservice
Metric-Imperial Converter, Issue Tracker, Personal Library, Stock Price Checker, Anonymous Message Board
https://www.freecodecamp.org/news/the-secret-to-unlimited-project-ideas/
https://github.com/trungk18/jira-clone-angular
https://github.com/sarwin-github/restaurant-app-angular-6 https://themeselection.com/angular-projects-with-source-code/
https://medium.com/@timofeybm/my-first-angular-application-experience-problems-solutions-4991d237ca57 https://idugalic.github.io/digital-restaurant-angular/
How to create a citizenship validation form using Javascript? How to create a stadium feature on our website of cricket in which we book tickets in Javascript? Design a website for online food ordering using javascript ? Design and implementation of an online trading community forum with payment portals using Javascript and blockchain Technology
Flight ticket booking app How to create a Quiz app Build and Deploy a Modern Full Stack ECommerce Application with Stripe create ticket reservation system
corona stats app kanban board
Make login with some authentication new user registration create a blog- anyone can register get a public page, create , update and delete posts shopping cart app How to create a chat app using only and only plain javascript and not its flavours?
How we can print all child except one particular child in firebase realtime database Web Javascript??
use any framework for complex components that we want to live update in the shadow Dom without page refresh
npm install angularfire2 firebase --save
https://reactjs.org/community/examples.html
https://hackr.io/blog/react-projects
https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps
https://react-projects.netlify.app/
https://reactjsexample.com/tag/challenge/
Birthday Reminder Tours Page Reviews Page Accordion Menu Tabs Portfolio Slider Lorem Ipsum Generator Color Generator Grocery List Navbar Sidebar and Model Stripe Menu Shopping Cart Cocktail Page
Text Editors - notepad editor for formatting -d
Payment gateway implementation - integrating payment systems-d
Browser Push Notifications
video play, edit programmatically
show toast message - alert msg angular - integration to other project
create an offline application using the JSstore library -d
Creating customisable & beautiful PDFs using jsPDF in angular-d
create pdf on client and server-side by using pdfmake package - integration to pdf project
Export Excel Data in Angular -d
Highlight text using mark.js library
Full-featured calendar npm package
Copy Array of Objects - immutability-helper - npm
Lazy-load images With ng-defer-load library -d
Moment.js npm
Tic tac toe Javascript game
Twitter API
various ways to upload files Three easy ways to add file upload functionality in angular project
How to upload files in angular using Cloudinary platform
How to capture the screenshot in angular using html2canvas?
Basic implementation of Virtual Scrolling -d
Browser Fingerprinting in Angular project
Create an email submission form in angular using the EmailJS library
manipulate image
keyboard shortcuts implementation - idea- getting key codes - keycode.info add shortcuts in the application.
https://onstipe.com/blog/how-to-embed-linkedin-feed-on-website/
Integrate Google calendar connections (CRUD operations) and although to be able to watch for changes in calendars(push notifications).
calendar ics file integrate calendar invite ?
Display .docx file in angular/react
https://www.npmjs.com/package/metascraper build a scraper to get the meta tags like title, description and image of any URL
https://javascript.plainenglish.io/vanilla-javascript-based-screen-recorder-29fff1cc7b00
Honey gain algo ?
create seat maps
sync gmail contact
design US leave system using DDD
simple search- perform operations like getting,set on the basis of particular id, update, get the list
drag and drop(reordering of elements) and drag n drop one div to another
how to delete the item by swipe
change the theme of the website using input type colour change theme of the project.
how to move any div,
how to make the grid,
HOW TO ADD loader,
Land measurement units conversions,
currency converter,
number systems
different types of text tools like generating random strings, and numbers, find and replacing functionality
develop different types of bar code
chrome extension in React -d
https://www.youtube.com/watch?v=_vok7vixhJI side projects
https://eneajaho.me/ open source project react
https://betterprogramming.pub/building-your-own-javascript-circle-progress-bar-ae6299e86bc7
https://www.linkedin.com/learning/instructors
https://replit.com/ learn code with AI
21 Easy JavaScript Projects for Beginners (Code included!) Skillcrusht https://skillcrush.com/blog/projects-you-can-do-with-javascript/
FTP Client-
suggested implementation: web, desktop or CLI app.
Build a simple FTP client. As a bonus challenge, support secure file transfer.
HTTP Server-
To understand HTTP deeply, build an HTTP server.
Build a simple operating system-
This is a project that is technically daring and will deepen your understanding of how computers and operating systems work. You might want to start with the free (and cleverly named) book, Operating Systems: From 0 to 1. Any programming language you can use that you want to master.
Build a web scraper-
Build a tool that takes a URL as an input and returns the content of the URL as HTML or XML.
Bandwidth monitor-
Build a tool to track how much information you have downloaded or uploaded on the internet. Have it email you a weekly summary of your usage. As a bonus challenge, predict peak usage times. Use a live-updating CLI tool.
Implement a cypher-
Build a tool that takes a string of text as input and encrypts it using a cypher, such as the Caesar cypher.
Create a text message downtime alert manager-
Create an app that takes a URL as an input and sends you a text message when a request to the URL returns a response code other than 200 (OK). Use Twilio API for sending text messages
Create Personal Finance Project-
This project will help you to achieve a practical goal (get a better handle on your finances), while also improving your software engineering skills.
Create A net worth calculator and tracker-.
Build a calculator you can use to track the rise or fall of your net worth monthly.
You can use something like this net value worksheet from Charles Schwab to guide you.
Optional extension: have it give you a 12-month report for the previous year on the first of January each year. You can make CLI, web, or mobile apps.
Create A tax forecaster-
This will be especially useful if you do any freelance software engineering. Build a tool that takes your freelance incomes as input and then predicts your expected tax liability for the rest of the financial year. Make it smart enough to predict periods of higher or lower need for your services, and adjust accordingly.
Create A deal finder-
Build a simple web app to notify you when an item you covet goes on sale for a good price. You could use a web scraper to pull the list of items from the product page and notify you of any price changes. Implement web apps with mobile notifications.
Create An expense tracker-
Create a simple interface you can use to add and categorize your expenses. Generate monthly reports based on the inputs and write custom alerts for things, like, spending too much money on coffee as always.
Create A financial independence calculator-
Financial independence is, essentially, saving and investing as much of your income as possible so that you don’t need to work for money.
While many financially independent people continue to work, they can now focus on doing work that they love, rather than work that pays the most. Build a tool to calculate, based on your: current savings, investments, income, retirement accounts, and expenses, how far away you are from financial independence.
Some examples: FIREcalc, cFIREsim.
Create A bill splitter-
Build a simple tool to help you and your friends split bills when you go out to eat together.
The feature that you have to include in A bill tracker:
Log bills, amounts, and dates-List bills. Have a few graphs this year / last year.
Store them somewhere.
Log expenses and tag them (or have categories), List expenses
Create A random name generator-
Build a random name generator (example) that creates unique names on the fly, based on an algorithm. Use machine learning techniques to help you by training the program with a sample data set of names similar to those you want to generate. Otherwise, create your own lexical rules for how names are generated. For example, a name generating algorithm inspired by The Handmaid’s Tale might stipulate that names for Handmaid women should start with ‘Of’, and end with a random male name, e.g., Ofpeter.
Conway’s Game of Life-
Conway’s Game of Life simulates the lives of simple cells that obey algorithmic laws. Use a platform capable of real-time graphical rendering. For this, first, you have to learn how the game works.
A procedurally generated map maker-
Create a browser-based application that allows users to procedurally generate a terrain map based on a random seed. The map can be as detailed or as simple as you’d like. This project is a good opportunity to learn about procedural generation.
A character generator-
Create a tool that allows you to randomly create playable characters for your favourite role-playing games, whether they be tabletop games, like Pathfinder, or video games, like Divinity: Original Sin. Create browser-based or mobile app, CLI.
Interactive fiction-
A fun way to get into game development without having to worry about graphical assets, interactive fiction renders the world for the player through text descriptions.
The Dreamhold is a good example of interactive fiction with a useful help command.
Microlearning app-
Build an application that sends you one page per day about something you want to learn. This could be a random page from Wikipedia, a page of React documentation, a Kanji character, or a page from the CIA World Factbook.
Slack bot-
If you or your team use the public chat app Slack, build a bot to make some aspect of your (or your team’s) life easier. Use Slack API.
Ideas: a coffee order bot, a bot that reports daily on the number of commits made to your team Repos, or a daily stand-up reminder bot.
Daily desktop background-
Build an application that refreshes your desktop background with a new image every day.
Use Unsplash API, the scripting language for your OS.
Lunch picker-
If you’re a working software developer, you’ve probably wrestled with one of the toughest questions in software development. Where should I have lunch?
Your lunch picker is the tool you’ll turn to answer this question. It can be simple and pick from a series of options you know you like at random, or more complex pulling in data from Google Reviews and taking into account: location, price, and type of cuisine.
Date planner-
One of the hardest things about dating, or being in a long-term relationship is deciding where to go on dates. Build a tool that searches restaurant reviews, event calendars, and other data for date idea suggestions.
Create a tool to simplify your email newsletters-
If you’re like me, you receive way too many email newsletters every week and they clutter up your inbox. Instead of unsubscribing from each of them in a fit of rage, build a tool that captures these emails and compiles them all into a single email that is sent once a week.
Use scripts hooked up to a mail server.
Bring your umbrella notifier-
Build a simple mobile application that sends you a phone notification in the morning telling you if you should take your umbrella to work (e.g., if it is going to rain in your area that day).
Collection tracker-
Build a tool to keep a record of something you collect.
You could keep track of the value of the item, the year it was made, its condition, and its location.
Create a training or coaching institute website-
features need to implement here-
Automatic Attendance in the system will be updated if students punch their i cards.
If any student will be absent then the system will detect it and send automatic SMS to the parents of that student.
Message to the institute manager if the fee is deposited.
Inquiry data stored in the system, that can be accessed(watched) from anywhere.
Inquiry data automatically erases if a student takes admission who enquire.
Student database stored in the system and can be viewed by different criteria like batch-wise, class-wise etc.
A reminder will be sent to the owner of the fee of the student not deposited on time.
While taking the fee deposit, the system will show the current fee including the pending fee and other charges.
There will be an option for login from where the owner can log in to check all these data.
Another login account for a receptionist who will feed enquiry data, fee update, upload notes for students, embed youtube videos of class etc.
Design Preferences: Front end will show only data like Info about the coaching centre, photos, notes of students class/course wise, videos of classes/courses etc.
create collection management projects like-
applications for books, music, podcasts, games, etc using the libre templates.
Create a To-do list app-
A to-do list that syncs with Google Spreadsheets and Evernote (using their APIs)
Create Idea tracker-
Create a mobile app to let you very quickly jot down a startup idea and share the list or partial list with a friend. Syncing with Google Spreadsheets is key.
registry app-
A merged registry that creates a merged view of multiple registries. Many people are doing unified [baby/wedding] registries, but they have a major weakness in that they don’t show if someone has purchased an item. This would allow someone to create many registries with just one view/link to give out to people.
Create a chat widget-
A chat widget that allows “branching” of conversations. You know how you’ll be in the middle of a conversation with someone and then another topic would come up? What if you could branch that part out to a new conversation? you can check the Chrome extension To overlay Yelp reviews on OpenTable.
Forum on the Fly-
Be able to create a very quick forum on the fly by just sending a link, supporting conversation threading and other things.
Online polls-
Online polls that don’t suck/get covered with ads. Think Doodle for polls.
Social book recommender-
Use Amazon receipts in the email (this can be done — TripIt can scan Gmail) or screen scrape Amazon past purchases to know what you’ve previously purchased. Then let you see what books have been most purchased by your friends. So many people I know want this.
Other projects-
Any app on your phone/computer that you think could be done slightly better (or better for your purpose).
Suggestion If you want to learn then commit it socially like sign up on Twitter and post your progress daily. It is also a good way to learn code.
Example-
I’m publicly committing to the 100DaysOfCode Challenge starting today! Learn More and Join me! hey @tagyourmentor #100DaysOfCode
MERN Project Ideas
Social Media App
Chat App
E-commerce Platform
Hotel Booking App
Travel Log App
Task Management Tool
Discord Clone
Bookstore Library
Basic Users System
Books Directory Real-time Chat Application Video Streaming Platform Youtube Video Downloader Collaborative Drawing App Movie Review Site
stock management system
AI-Powered Analytics Tool**
- An advanced analytics tool leveraging AI to provide actionable insights.
Custom Mobile App*
- A custom mobile app solution for a leading retail company.