Top 10 web project ideas for students

There are a lot of great ideas for creating websites for academic purposes, for social media or just for fun. Many students start with a personal website, but there are a lot of opportunities to learn, share and collaborate with peers eventually.

Take a look at this list of web projects ideas for students that can help you learn new skills, keep busy and why not make some money along the way :

JSON2CSV app

Difficulty :beginner

The objective of JSON2CSV is to help bridge the gap between JSON and CSV by converting JSON to CSV to make it easier to review data in a spreadsheet.

The web app should basicaly allow the user to paste JSON into a text box to generate its equivalent CSV.

Suggested features :

  • User can paste JSON syntax into a text box
  • User can click a 'Convert' button to validate the JSON text box and convert it to CSV
  • User can see the converted CSV in another text box
  • User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON
  • User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes.

Bin2Dec

Difficulty :beginner

Binary is the number system all digital computers are based on. Therefore it's important for developers to understand binary, or base 2, mathematics. The purpose of Bin2Dec is to provide practice and understanding of how binary calculations.

Bin2Dec allows the user to enter strings of up to 8 binary digits, 0's and 1's, in any sequence and then displays its decimal equivalent.

Suggested features :

  • User can enter up to 8 binary digits in one input field
  • User must be notified if anything other than a 0 or 1 was entered
  • User views the results in a single output field containing the decimal (base 10) equivalent of the binary number that was entered
  • User can enter a variable number of binary digits

Border Radius Previewer

Difficulty :beginner

The border-radius property can have multiple values changed. Preview how the shape looks while changing these values and copy the resulting CSS to your clipboard.

This is a perfect project for learning CSS manipulation with JavaScript and understanding how the border-radius property works.

User Stories:

  • User can see a box which has a border-radius property applied to it
  • User can change the 4 border-radius values that are applied to the box (top-left, top-right, bottom-left, bottom-right)
  • User can copy the resulting CSS to the clipboard

Bonus Features:

  • User can change all 8 possible values of the border-radius in order to create a complex shape
  • User can select different units (px, em, rem, %)
  • User can preset common border-radius patterns
  • User can generate random border-radius values
  • User can save favorite combinations

What you'll learn:

  • CSS border-radius property
  • DOM manipulation with JavaScript
  • Real-time preview updates
  • Clipboard API
  • Event handling
  • CSS units and values

Calculator app

Difficulty :beginner

This project will teach you how to use Classes when working in the DOM and how to format your data in a way that looks nice

It will also teach you how to use CSS Grid in practice

Christmas Lights

Difficulty :beginner

The ChristmasLights application relies on your development talents to create a mesmerizing light display. Your task is to draw seven colored circles in a row and based on a timer change the intensity of each circle. When a circle is brightened it's predecessor returns to its normal intensity.

This simulates the effect of a string of rippling lights, similar to the ones displayed during the Christmas Holidays.

Suggested features :

  • User can press a button to start and stop the display
  • User can select the color used to fill each circle
  • User can change the size of any circle in the row
  • User can change the interval of time controlling the change in intensity
  • User can specify the number of rows to be included in the display. From one to seven rows can be chosen
  • User can specify the intensity value

Color Cycle App

Difficulty :beginner

The use of color plays a major role in an application's User Interface and User Experience (UI/UX). ColorCycle seeks to help developers better understand RGB colors by making small changes to a colored box over time.

This app draws a box filled with a user specified color and makes small changes over time also based on user input. It cycles through changes to the originally specified color, allowing users to experience the visual impact of different changes to individual parts of an RGB color specification.

User Stories:

  • User can specify a starting fill color as a six hexadecimal standard CSS color code in three individual components of two digits each - red, blue, and green
  • User can specify an increment value for each color component that will be added to that component every .25 second
  • User can see the box containing the fill color change every .25 seconds
  • User can only change the color components and their increments when the app is stopped
  • User can start and stop the fill operation using a button whose name changes to 'Start' when stopped and 'Stop' when started
  • User will receive a warning if something other than hexadecimal digits are entered for the color components

Bonus Features:

  • User can change the time interval between color changes
  • User can specify the color encoding format used from RGB to another format like HSL
  • User can save favorite color combinations
  • User can export the color cycle as a CSS animation

What you'll learn:

  • RGB color manipulation
  • Hexadecimal number systems
  • JavaScript timers and intervals
  • Form validation
  • Real-time visual updates
  • Color theory basics

Countdown Timer

Difficulty :beginner

We all have important events we look forward to in life, birthdays, anniversaries, and holidays to name a few. Wouldn't it be nice to have an app that counts down the months, days, hours, minutes, and seconds to an event? Countdown Timer is just that app!

The objective of Countdown Timer is to provide a continuously decrementing display of the he months, days, hours, minutes, and seconds to a user entered event.

Suggested features :

User can see an event input box containing an event name field, an date field, an optional time, and a 'Start' button.

  • User can define the event by entering its name, the date it is scheduled to take place, and an optional time of the event. If the time is omitted it is assumed to be at Midnight on the event date in the local time zone.
  • User can see a warning message if the event name is blank.
  • User can see a warning message if the event date or time are incorrectly entered.
  • User can see a warning message if the time until the event data and time that has been entered would overflow the precision of the countdown timer.
  • User can click on the 'Start' button to see the countdown timer start displaying the days, hours, minutes, and seconds until the event takes place.

CSV to JSON Converter

Difficulty :beginner

CSV (Comma Separated Values) and JSON (JavaScript Object Notation) are both popular data formats. This converter helps transform data between these formats, which is a common need in web development and data processing.

This project teaches you about data formats, parsing algorithms, and building useful developer tools.

User Stories:

  • User can paste CSV data into a text area
  • User can click a 'Convert' button to transform CSV to JSON
  • User can see the converted JSON in another text area
  • User can copy the JSON output to clipboard
  • User can see error messages for invalid CSV data
  • User can clear both input and output areas

Bonus Features:

  • User can upload CSV files from their computer
  • User can download the JSON output as a file
  • User can customize the JSON structure (array of objects vs nested objects)
  • User can handle different CSV delimiters (comma, semicolon, tab)
  • User can preview data in a table format before conversion
  • User can convert JSON back to CSV
  • User can handle special characters and escape sequences
  • User can validate and format the JSON output
  • User can process large CSV files efficiently

What you'll learn:

  • CSV parsing algorithms and edge cases
  • JSON structure and formatting
  • File upload and download functionality
  • Text processing and string manipulation
  • Error handling for data validation
  • Regular expressions for parsing
  • Clipboard API usage
  • Data format conversion techniques

Currency Converter

Difficulty :intermediate

A currency converter is used to convert an amount in one currency to its corresponding value in another currency using their current exchange rate. This project teaches you how to work with external APIs, handle asynchronous operations, and create practical financial tools.

Current exchange rates are usually provided by banks and other financial service providers through APIs that developers can integrate into their applications.

User Stories:

  • User can enter up to 9 digits to represent the amount to convert in a source input field
  • User can view a sorted list of available currencies and select the currency to convert from in a source drop-down list
  • User can view a sorted list of available currencies and select the currency to convert to in a destination drop-down list
  • User views the value (rounded to two decimal places) of the source amount converted to the destination currency in a single output field as soon as either the input value, the source currency, or the destination currency is changed
  • User must be alerted if the input is not a number

Bonus Features:

  • User should be able to swap the values of the source and destination drop-down lists on the click of a button
  • User can see historical exchange rate charts
  • User can set up rate alerts for specific currency pairs
  • User can see conversion fees from different providers
  • User can save favorite currency pairs
  • User can work offline with cached rates
  • User can see currency trends and analysis

What you'll learn:

  • Working with external APIs
  • Making HTTP requests with fetch API
  • Handling asynchronous JavaScript (Promises/async-await)
  • Error handling for network requests
  • Input validation and formatting
  • Real-time data updates
  • Currency formatting and localization
  • Caching strategies for better performance

Drawing App

Difficulty :beginner

Create digital artwork on a canvas on the web to share online and also export as images.

Suggested features :

  • User can draw in a canvas using the mouse
  • User can change the color
  • User can press a button to clear the canvas
  • User can change the size of the tool
  • User can draw different shapes (rectangle, circle, star, etc)
  • User can save the artwork as an image (.png, .jpg, etc format)
  • User can share the artwork on social media

Expense Tracker App

Difficulty :intermediate

Personal finance management is crucial for financial health. This expense tracker helps users monitor their spending, set budgets, and gain insights into their financial habits through comprehensive tracking and analytics.

This project teaches you about data persistence, financial calculations, data visualization, and creating practical applications that solve real-world problems.

User Stories:

  • User can add new expenses with amount, category, description, and date
  • User can add income entries to track earnings
  • User can view a list of all transactions sorted by date
  • User can edit or delete existing transactions
  • User can categorize expenses (food, transportation, entertainment, utilities, etc.)
  • User can see their current balance (income minus expenses)
  • User can filter transactions by date range or category

Bonus Features:

  • User can set monthly budgets for different categories
  • User can see budget progress and warnings when approaching limits
  • User can view expense analytics with charts (pie charts for categories, line charts for trends)
  • User can export financial data to CSV or PDF
  • User can set up recurring transactions (salary, rent, subscriptions)
  • User can attach receipts or notes to transactions
  • User can see monthly/yearly financial summaries
  • User can set financial goals and track progress
  • User can get spending insights and recommendations
  • User can sync data across multiple devices
  • User can set up expense reminders and notifications

What you'll learn:

  • Local storage for financial data persistence
  • Data visualization with charts and graphs
  • Date manipulation and filtering
  • Financial calculations and budgeting logic
  • Form validation for financial inputs
  • Data export functionality
  • Dashboard design for analytics
  • Responsive design for mobile expense tracking
  • Data security considerations for financial apps
  • Performance optimization for large datasets

Flashcards App

Difficulty :intermediate

FlashCards are a time-tested technique used by students to review and test their knowledge on a particular subject. This app is based on a knowledge base of questions and answers and randomly displays cards with questions and multiple answers.

This project teaches you about data structures, randomization algorithms, and creating educational applications with scoring systems.

User Stories:

  • User can see a single card, randomly picked from the "deck" displayed at any point in time
  • User can see a question on the card and a list of four possible answers, each identified by a letter
  • User can select an answer by clicking on it
  • User can see an error displayed when the wrong answer is selected
  • User can see a congratulations message when the correct answer is selected
  • User can click a 'Next Question' button to display the next flash card

Bonus Features:

  • User can click a 'Results' button to display the tallies of correct and incorrect answers
  • User can click a 'Reset' button to reset the tallies of correct and incorrect answers
  • User can click a 'Shuffle' button to re-randomize the "deck"
  • User can click a 'More Info' button to flip the flash card to see additional information
  • User can create custom flash card decks
  • User can track progress over time
  • User can set difficulty levels
  • User can study specific topics or categories
  • User can see performance analytics

What you'll learn:

  • Data structures for storing questions and answers
  • Randomization and shuffling algorithms
  • State management for tracking progress
  • Card flip animations with CSS
  • Score calculation and statistics
  • Local storage for progress tracking
  • Quiz application architecture
  • User feedback and interactive design

Flip Image App

Difficulty :beginner

It's important for Web Developers to understand the basics of manipulating images since rich web applications rely on images to add value to the user interface and user experience (UI/UX).

FlipImage explores one aspect of image manipulation - image rotation. This app displays a square pane containing a single image presented in a 2x2 matrix.

User Stories:

  • User can see a pane containing a single image repeated in a 2x2 matrix
  • User can flip any one of the images vertically or horizontally using a set of up, down, left, and right arrows next to the image
  • User can see smooth animations when flipping images

Bonus Features:

  • User can change the default image by entering the URL of a different image in an input field
  • User can display the new image by clicking a 'Display' button next to the input field
  • User can see an error message if the new image's URL is not found
  • User can rotate the images in 90-degree increments
  • User can reset all images to their original state
  • User can apply multiple transformations simultaneously
  • User can upload their own images from their device
  • User can save the transformed image

What you'll learn:

  • CSS transforms and animations
  • Image manipulation with CSS
  • Matrix operations for image transformations
  • Event handling for interactive controls
  • File input and image loading
  • Error handling for image loading
  • CSS transition and animation properties
  • DOM manipulation for dynamic content

GitHub Profiles App

Difficulty :intermediate

APIs allow you to use real-world data that drives platforms like GitHub. You can communicate with remote servers and get data to build comprehensive applications.

This project creates a search app that uses the GitHub API to retrieve user information when a valid username is input. Perfect for learning API integration and data visualization.

User Stories:

  • User can enter a username in a search field
  • User can click on search button to retrieve information
  • User can see the avatar, username, followers and repository count of searched user
  • User can see the top 4 repositories of searched user based on stars/forks
  • User should get an alert if the username is not valid
  • User can see loading states while data is being fetched

Bonus Features:

  • User can toggle dark/light mode (mode should persist when user returns)
  • User can view all repositories with pagination
  • User can see detailed repository information (languages, issues, PRs)
  • User can see user's contribution graph
  • User can compare multiple users side by side
  • User can see trending repositories
  • User can filter repositories by language
  • User can see user's organizations and gists
  • User can export profile data as PDF
  • User can see user's recent activity

What you'll learn:

  • GitHub API integration and authentication
  • Complex data fetching and error handling
  • Responsive design for profile layouts
  • Data visualization for statistics
  • Pagination and infinite scrolling
  • Local storage for theme persistence
  • Search functionality with debouncing
  • Loading states and skeleton screens

GitHub Status App

Difficulty :beginner

Web apps acquire data in many ways - through user input, APIs, files, databases, and sometimes by "scraping" websites. The GitHub Status app introduces you to retrieving and displaying real-time status information from external services.

This project teaches you how to work with status APIs and create monitoring dashboards for services you depend on.

User Stories:

  • User can see the current status for GitHub Git operations, API Requests, Operational Issues, PRs, Dashboard, Projects, Operational Notifications, Operational Gists, and Operational GitHub Pages as a list in the main app window
  • User can retrieve the most recent status from the GitHub Status website by clicking a 'Get Status' button
  • User can see when the status was last updated

Bonus Features:

  • User can see any of the GitHub components that are not in 'Operational' status highlighted by a different color, background animation, or any other technique to make it stand out
  • User can see historical incident data
  • User can set up notifications for status changes
  • User can see response time metrics
  • User can view status for other services (Twitter, AWS, etc.)
  • User can see uptime percentages
  • User can subscribe to status updates
  • User can see maintenance schedules

What you'll learn:

  • Working with status and monitoring APIs
  • Real-time data fetching and updates
  • Visual indicators for system status
  • Error handling for service monitoring
  • JSON data parsing and display
  • Creating dashboard interfaces
  • Working with external service APIs
  • Polling for status updates

Lorem Ipsum Generator

Difficulty :beginner

Lorem Ipsum is simply dummy text of the printing and typesetting industry. This app generates passages of lorem ipsum text suitable for use as placeholder copy in web pages, graphics, and more.

This is a great project for beginners to learn about text manipulation, user input handling, and creating useful developer tools.

User Stories:

  • User can type into an input field the number of paragraphs of lorem ipsum to be generated
  • User can see the generated paragraphs of lorem ipsum and is able to copy them
  • User can specify the number of words per paragraph
  • User can choose between different types of placeholder text

Bonus Features:

  • User can choose different lorem ipsum variations (lorem ipsum, hipster ipsum, bacon ipsum, etc.)
  • User can generate text in different formats (paragraphs, sentences, words)
  • User can control the length of sentences and paragraphs
  • User can add HTML tags to the generated text
  • User can save frequently used configurations
  • User can export text in different formats (plain text, HTML, markdown)

What you'll learn:

  • String manipulation and generation
  • User input validation
  • Clipboard API
  • Text formatting
  • Random text generation algorithms
  • Creating utility tools for developers

Markdown Previewer

Difficulty :intermediate

Convert Github flavored markdown into HTML code with a live preview. This project is essential for developers who work with documentation, README files, or any content management system that supports markdown.

This is an extremely practical project that teaches you text processing, parsing, and creating developer tools.

User Stories:

  • User can enter Github flavored markdown into a textarea
  • User can see the resulting HTML in another container/box by pressing on a button
  • User can switch between editor and preview modes
  • User can see syntax highlighting in the markdown editor

Bonus Features:

  • User can see the resulting HTML updated automatically when the markdown textarea is changed
  • When closing the browser window the markdown formatted text will be stored in localStorage and when the User returns, the data will be retrieved and displayed
  • User can click a button and the content of the box is saved to the clipboard
  • User can export the HTML or PDF version of the document
  • User can use a split-screen view (editor on left, preview on right)
  • User can insert common markdown elements with toolbar buttons
  • User can upload and insert images
  • User can use themes for both editor and preview
  • User can print the rendered markdown

What you'll learn:

  • Text parsing and processing
  • Regular expressions for markdown syntax
  • Working with markdown parsing libraries
  • LocalStorage for data persistence
  • Clipboard API
  • Split-pane UI design
  • Text editor enhancements
  • File handling and exports
  • CSS styling for rendered content

Meme Generator App

Difficulty :intermediate

Allow users to generate custom memes by adding text over images. This project teaches you about canvas manipulation, image processing, and creating interactive editing tools.

This is a fun and engaging project that combines creativity with technical skills, perfect for learning about graphics programming in the browser.

User Stories:

  • User can upload an image that will appear in a canvas
  • User can add text in the top part of the image
  • User can add text in the bottom part of the image
  • User can select the color of the text
  • User can select the size of the text
  • User can save the resulting meme as an image

Bonus Features:

  • User can select the font-family for the text
  • User can share the meme on social media (Twitter, Reddit, Facebook, etc.)
  • User can drag the text around and place it wherever they want on top of the image
  • User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse)
  • User can add multiple text elements
  • User can apply text effects (outline, shadow, gradient)
  • User can use popular meme templates
  • User can adjust image filters and effects
  • User can add stickers and emojis
  • User can create animated GIF memes

What you'll learn:

  • HTML5 Canvas API for image manipulation
  • File upload and image processing
  • Text rendering and positioning on canvas
  • Drag and drop functionality
  • Color picker implementations
  • Font loading and text styling
  • Image export and download functionality
  • Social media sharing integration
  • Drawing tools and shape creation

Notes App

Difficulty :beginner

Create and store your notes for later purpose! This is a fundamental project for learning CRUD operations, local storage, and building practical applications.

This project teaches you the basics of data persistence in web applications and is a stepping stone to more complex applications.

User Stories:

  • User can create a note
  • User can edit a note
  • User can delete a note
  • When closing the browser window the notes will be stored and when the User returns, the data will be retrieved
  • User can search through their notes
  • User can organize notes by categories or tags

Bonus Features:

  • User can create and edit a note in Markdown format. On save it will convert Markdown to HTML
  • User can see the date when they created the note
  • User can set reminders for notes
  • User can export notes to different formats (txt, pdf, etc.)
  • User can sync notes across devices
  • User can add images to notes
  • User can organize notes in folders
  • User can pin important notes to the top

What you'll learn:

  • LocalStorage API for data persistence
  • CRUD operations (Create, Read, Update, Delete)
  • DOM manipulation
  • Event handling
  • Data validation
  • Search functionality
  • Markdown parsing (bonus)
  • Date and time handling

Password Generator

Difficulty :intermediate

Generate secure passwords based on certain characteristics selected by the user. This is an essential tool for cybersecurity and teaches important concepts about password strength and security.

User Stories:

  • User can select the length of the generated password
  • User can select one or multiple of the following: Include uppercase letters, Include lowercase letters, Include numbers, Include symbols
  • By clicking the Generate password button, the user can see a password being generated
  • User can click a Copy to clipboard button which will save the password to the clipboard

Bonus Features:

  • User can see the password strength indicator
  • User can exclude similar characters (i, l, 1, L, o, 0, O)
  • User can generate multiple passwords at once
  • User can save generated passwords securely
  • User can customize which symbols to include/exclude
  • User can generate passphrases instead of passwords
  • User can set rules for password patterns
  • User can check if generated password has been compromised in data breaches
  • User can generate QR codes for passwords

What you'll learn:

  • Cryptographically secure random number generation
  • Password strength algorithms
  • Character set manipulation
  • Clipboard API usage
  • Security best practices
  • User experience design for security tools
  • Regular expressions for pattern validation
  • Password entropy calculations

Pomodoro Clock

Difficulty :beginner

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks - 5 minutes.

Suggested features :

  • User can see a timer for 25 minutes - the working session
  • After the working session is over, the User can see a timer for 5 minutes - the break session
  • User can hear a sound playing when the timer hits 00:00 - denoting that the session has ended
  • User can start / pause, stop and reset the timers
  • User can set a long break session of 10 minutes. This will be activated every 4th break session
  • User can change / customize the minutes in both sessions before starting

Quiz App

Difficulty :beginner

Practice and test your knowledge by answering questions in a quiz application. As a developer you can create a quiz application for testing coding skills of other developers (HTML, CSS, JavaScript, Python, PHP, etc...).

This project is excellent for learning state management, user interaction patterns, and creating engaging user experiences.

User Stories:

  • User can start the quiz by pressing a button
  • User can see a question with 4 possible answers
  • After selecting an answer, display the next question to the User. Do this until the quiz is finished
  • At the end, the User can see the following statistics:
    • Time it took to finish the quiz
    • How many correct answers they got
    • A message showing if they passed or failed the quiz

Bonus Features:

  • User can share the result of a quiz on social media
  • Add multiple quizzes to the application. User can select which one to take
  • User can create an account and have all the scores saved in their dashboard
  • User can complete a quiz multiple times
  • User can see detailed explanations for correct/incorrect answers
  • User can pause and resume the quiz
  • User can skip questions (with penalties)
  • Different difficulty levels with scoring adjustments

What you'll learn:

  • State management in JavaScript
  • Timer functionality
  • Score calculation algorithms
  • User interface design for engagement
  • Data structures for quiz questions
  • Progress tracking
  • Local storage for saving progress
  • API integration (for trivia questions)

Random Meal Generator

Difficulty :beginner

Generate a random meal from an API to discover new recipes and cooking ideas. This project is perfect for learning API integration and working with external data sources.

This project teaches you the fundamentals of making API calls and displaying dynamic content from external sources.

User Stories:

  • User can click a button that will get a random meal from an external API
  • The app should display: Recipe name, Ingredients, Instructions and a Picture of the meal
  • By clicking the button again, another meal will be generated
  • User can see a loading indicator while fetching the meal

Bonus Features:

  • The app should display a YouTube Video for the recipe
  • User can search for meals by name or ingredient
  • User can filter meals by category (breakfast, lunch, dinner)
  • User can save favorite meals to a list
  • User can see nutritional information if available
  • User can generate meal plans for the week
  • User can share meals on social media
  • User can print recipe cards

What you'll learn:

  • Making HTTP requests to external APIs
  • Working with JSON data
  • Handling asynchronous operations with fetch API
  • Error handling for network requests
  • Displaying dynamic content from APIs
  • Loading states and user feedback
  • Working with media content (images, videos)
  • API documentation and integration

Random Number Generator

Difficulty :beginner

Generate random numbers between specified ranges. This simple but practical project is perfect for learning basic programming concepts and can be used for games, testing, or any application that needs random values.

User Stories:

  • User can set a minimum and maximum value for the range
  • User can generate a random number within the specified range
  • User can see the generated number displayed clearly
  • User can generate multiple numbers at once
  • User can copy the generated number to clipboard

Bonus Features:

  • User can generate random decimal numbers
  • User can exclude certain numbers from the range
  • User can generate multiple random numbers at once
  • User can see a history of previously generated numbers
  • User can save frequently used ranges
  • User can generate numbers with specific patterns (even, odd, prime)
  • User can export generated numbers to a file
  • User can visualize the distribution of generated numbers

What you'll learn:

  • Math.random() function and random number generation
  • Input validation and range checking
  • User interface design
  • Event handling
  • Basic statistics and distribution
  • Data visualization (for bonus features)

Recipe App

Difficulty :beginner

Create a digital cookbook to store and organize your favorite recipes. This project teaches you about data organization, search functionality, and creating practical applications for everyday use.

User Stories:

  • User can add new recipes with ingredients and instructions
  • User can view a list of all saved recipes
  • User can click on a recipe to view its full details
  • User can edit existing recipes
  • User can delete recipes they no longer want
  • User can search for recipes by name or ingredient

Bonus Features:

  • User can categorize recipes by meal type (breakfast, lunch, dinner, dessert)
  • User can rate recipes and see ratings
  • User can add photos to recipes
  • User can scale recipe quantities up or down
  • User can create shopping lists from recipe ingredients
  • User can mark recipes as favorites
  • User can share recipes with others
  • User can import recipes from URLs
  • User can track nutritional information
  • User can plan weekly meals

What you'll learn:

  • CRUD operations (Create, Read, Update, Delete)
  • Data modeling for structured content
  • Search and filtering algorithms
  • Local storage for data persistence
  • Form handling and validation
  • Image upload and handling
  • User interface design for content management

Roman to Decimal Converter

Difficulty :beginner

Learn about number systems and algorithms by building a converter that transforms Roman numerals to decimal numbers and back. This project teaches you about different number systems and conversion algorithms.

Roman numerals are still used today in various contexts, making this a practical and educational project.

User Stories:

  • User can enter a Roman numeral and see the decimal equivalent
  • User can enter a decimal number and see the Roman numeral equivalent
  • User can see error messages for invalid Roman numerals
  • User can see error messages for numbers outside the valid range (1-3999)
  • User can clear the input and start over

Bonus Features:

  • User can see a reference chart of Roman numeral rules
  • User can practice with random Roman numeral quizzes
  • User can see the step-by-step conversion process
  • User can handle both uppercase and lowercase input
  • User can convert ranges of numbers at once
  • User can see historical context about Roman numerals
  • User can export conversion results
  • User can work with larger numbers using extended notation

What you'll learn:

  • Number system conversion algorithms
  • String parsing and validation
  • Regular expressions for input validation
  • Mathematical operations and logic
  • Algorithm optimization
  • Historical number systems
  • Input sanitization and error handling
  • User interface design for calculators

Stopwatch app

Difficulty :beginner

A stopwatch helps you track the time you spent on activities.

This is an interesting app that will give you the opportunity to manipulate timers and some interesting concepts in javascript!

Suggested features :

  • User can start a clock
  • User can create laps - these will be displayed on the screen
  • When the clock is stopped the user can click start again and the clock will continue counting up
  • User can stop the clock
  • User can clear all the laps
  • User can restart the clock

To-Do list App

Difficulty :beginner

This is a project everyone recommends to build because it ensures you learn the fundamentals. From how to manipulate the DOM to how to work with Local Storage, this is the project that can teach you the most!

you will learn :

  • How to create new tasks
  • How to validate fields
  • Filtering tasks (completed, active, ...) by learning filter and reduce
  • And especially understanding the fundamentals of JavaScript.

Word Frequency

Difficulty :beginner

Calculating the frequency of words in a block of text is a technique which has various uses in algorithms such as searching, sorting, and semantic analysis. The objective of the Word Frequency app is count the frequency of words in a block of text and create a tabular display of each unique word in the text along with its frequency, in descending order by frequency.

Suggested features :

  • User can see a text input box, a 'Translate' button, and a word frequency table.
  • User can see an error message if the text input box is empty.
  • User can click the 'Translate' button to analyze the word frequency in the text that has been input.
  • User can see the word frequency table ordered in descending sequence by word frequency.
  • User can see the word frequency table populated when the 'Translate' button is clicked. Each row in the table contains a word and the number of times it occurs in the input text.
  • User can enter text (or cut and paste) into the input box. This input box must allow the entry of large blocks of text (maximum of 2048 characters).

Conclusion

We understand that as a student you have a number of things on your to do list that it can be hard to find time to research one idea at a time. These are our top project ideas for you as students.

All projects mentioned above are relatively easy and they are excellent for learning new skills and prepare your portfolio for your next professional journey.

Happy building!