10 Intermediate Web Projects to Level Up Your Skills

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

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

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 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

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

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

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

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