💙 25 Project Ideas for Web Developers 🚀

⇨ Ideas includes for Colours, Shapes, Emojis, GIFs etc.
⇨ Skills: HTML/CSS, JavaScript, Python (Optional)

These projects can be categorised into

1️⃣ Utility Apps
2️⃣ Color Based
3️⃣ Shapes
4️⃣ Image Related
5️⃣ Drawing
6️⃣ Add-Ons
7️⃣ Authentication and, Authorisation
1️⃣ Utility Apps

P1️⃣ Single Page App
⇥ To start with build a SPA and, make it responsive. It could be a portfolio page or, a product catalog page.

P2️⃣ Landing Page
⇥ Landing pages are very important. Show products/features in carousels. Allow to zoom-in/zoom-out.
P3️⃣ Survey Form
⇥ Create a wizard type survey form. Add little bit animation, allow user to skip and come back

P4️⃣ Media Player
⇥ Can you create a media player with some good features for your website?

P5️⃣ Quiz App
⇥ Make it random and non-predictive. Add a little animation
2️⃣ Colour Based

P6️⃣ Color Picker
⇥ Allow to pick a colour from some popular colours or, from an existing image.

P7️⃣ Color Generator
⇥ Randomly generate some colour. Or,
⇥ Given a colour, generate other compatible colours.
P8️⃣ Color Gradients
⇥ Take one or, multiple colours and generate various gradient colours.

P9️⃣ Color Palettes
⇥ Show user multiple colour palettes or,
⇥ Given a color, generate a color palette.
3️⃣ Shapes

P1️⃣0️⃣ Popular Shapes
⇥ Generate popular shapes with little bit effects like shadow, rounded corners, gradient colours etc.

P1️⃣1️⃣ Custom Shapes
⇥ For any predefined shape, allow user to customise it by adding corners, curves etc.
P1️⃣2️⃣ Blobs
⇥ Generate blobs, allow user to customise, reshape.

P1️⃣3️⃣ Waves
⇥ Generate random shaped waves, allow user to customise it.

P1️⃣4️⃣ 3-D Shapes
⇥ Can you create shapes in 3-D? 3-D shapes look more real.
4️⃣ Image Related

P1️⃣5️⃣ Size Reducer
⇥ Given an image, reduce its resolution in such a way that its quality is still at a better side.

P1️⃣6️⃣ Background Remover/Changer
⇥ Take any image, can you remove the background?
⇥ Allow user to add its own background colour/image.
P1️⃣7️⃣ Object Addition to Image
⇥ Allow user to add emoji/images/text with some cool effects to an existing image.

P1️⃣8️⃣ Image Cropper
⇥ Allow user to crop and/or resize an image.
5️⃣ Drawing

P1️⃣9️⃣ 2-D Drawing App
⇥ How cool would it be to draw something on a canvas? Build a 2-D drawing app.

P2️⃣0️⃣ 3-D Drawing App
⇥ Can this 2-D app be enhanced to a 3-D app? Try it.
6️⃣ Add-Ons

P2️⃣1️⃣ Chat Services
⇥ Add chat feature. Allow user to send text/media files etc.

P2️⃣2️⃣ Emoji Chooser
⇥ Suggest user some emojis based on a given input text.

P2️⃣3️⃣ GIF Chooser
⇥ Connect with some APIs (like Giphy). Allow user to search and share a GIF.
7️⃣ Authentication and, Authorisation

P2️⃣4️⃣ In-House Auth
⇥ To start, build your own auth service. You can keep it simple.

P2️⃣5️⃣ Auth through 3rd-party
⇥ Connect with Google, GitHub etc for Auth.
⇥ You can use OAuth2, OpenID.
9️⃣9️⃣ Final Words

Question might be coming in your mind, if many of these apps are already built, why should we build on our own?

⇥ To learn.
⇥ You may further enhance it and sell.

Who knows? Every popular product has started from very simple feature sets. Yours' the next. 🤩
1️⃣0️⃣0️⃣ Difficulty Level

P1️⃣ Single Page App ⇨ Easy
P2️⃣ Landing Page ⇨ Medium
P3️⃣ Survey Form ⇨ Medium
P4️⃣ Media Player ⇨ Expert
P5️⃣ Quiz App ⇨ Medium
P6️⃣ Color Picker ⇨ Medium
P7️⃣ Color Generator ⇨ Easy
P8️⃣ Color Gradients ⇨ Medium
P9️⃣ Color Palettes ⇨ Medium
P1️⃣0️⃣ Popular Shapes ⇨ Easy
P1️⃣1️⃣ Custom Shapes ⇨ Medium
P1️⃣2️⃣ Blobs ⇨ Expert
P1️⃣3️⃣ Waves ⇨ Expert
P1️⃣4️⃣ 3-D Shapes ⇨ Expert
P1️⃣5️⃣ Size Reducer ⇨ Expert
P1️⃣6️⃣ Background Remover/Changer ⇨ Expert
P1️⃣7️⃣ Object Addition to Image ⇨ Medium
P1️⃣8️⃣ Image Cropper ⇨ Easy
P1️⃣9️⃣ 2-D Drawing App ⇨ Expert
P2️⃣0️⃣ 3-D Drawing App ⇨ Expert
P2️⃣1️⃣ Chat Services ⇨ Medium
P2️⃣2️⃣ Emoji Chooser ⇨ Medium
P2️⃣3️⃣ GIF Chooser ⇨ Medium
P2️⃣4️⃣ In-House Auth ⇨ Medium
P2️⃣5️⃣ 3rd-party Auth ⇨ Medium
Do you find this 🧵 useful? Please Like ( ❤️ ) and RETWEET ( 🔁 ) the very first tweet.

Reply ( 💬 ) with your feedbacks and suggestions.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Swapna Kumar Panda ✨

Swapna Kumar Panda ✨ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @swapnakpanda

25 Nov
💛 CSS Property: border-radius 💛
.
.
↓↓↓↓↓↓↓↓↓↓ Image
Let's learn about "border-radius" through illustrations.

Topics are,

1️⃣ Introduction
2️⃣ How to define?
2️⃣.1️⃣ One/Two/Three/Four Values
2️⃣.2️⃣ Percentage Value
2️⃣.3️⃣ Horizontal and Vertical Radius
3️⃣ Other Related Properties
4️⃣ Shapes using border-radius
5️⃣ Conclusion
1️⃣ Introduction Image
Read 10 tweets
24 Nov
NoSQL Interview Questions

Disclaimer:

• The questions covered here are mostly conceptual
• I do not claim only these type of questions are/should be asked during interviews
• For interviews, you should have fundamentals strong. And you should be able to provide solutions to practical problems.
Series: 1️⃣
Level: Beginner
Topics:

1️⃣ Basics
2️⃣ CAP Theorem
3️⃣ Categories
4️⃣ Concepts
Read 10 tweets
23 Nov
💜 NPM Commands Cheat Sheet

Find reference to some of the most used NPM commands for Nodejs Development.

Image
There are more commands than listed here. If you want to know about all those commands, NPM has a very nice documentation.

Find reference to all commands here 👇

https://docs[.]npmjs[.]com/cli/v6/commands
1️⃣ npm init Image
Read 8 tweets
22 Nov
💙 Matrix implementation in JavaScript

Let's learn through this 🧵

0️⃣ Introduction

Matrix is a 2-dimensional Array arrangement of numbers.

Example:
[[a₁₁, a₁₂, a₁₃],
[a₂₁, a₂₂, a₂₃],
[a₃₁, a₃₂, a₃₃]]
✪ Element: Each item in the inner array is called an element of the matrix. Eg, a₁₁

✪ Row: Each item in the main array is called a row. Eg, [a₁₁, a₁₂, a₁₃]

✪ Column: A column is list of items at a specific index from each row in order. Eg, [a₁₁, a₂₁, a₃₁]
Read 18 tweets
21 Nov
💙 MongoDB in a Nutshell

Let's explore MongoDB, but in a nutshell.

👇 Image
0️⃣ Introduction

MongoDB is a leading NoSQL document-based database.

Let's explore some basic terminologies. ↓
1️⃣ MongoDB Server

✪ MongoDB Server is a server-side component which can host multiple databases.
Read 6 tweets
21 Nov
DSA - Starter Kit 🚀

⇨ Who should learn?
⇨ Why to learn?
⇨ What should we start with?
⇨ How much is necessary?
⇨ Where to learn?

A comprehensive startup, oops "Starter Kit"

0️⃣ Let's Talk

✪ What is DSA?
→ DSA stands for "Data Structures and Algorithms"
→ DSA is a subject of study and, practice mostly in "Programming Domain"
→ Unlike popular belief, DSA is not one thing, rather 2 tightly coupled topics.
✪ What is a Data Structure?
A data structure is a way of organising (or, collecting) the data so that it can be used efficiently and effectively.

✪ What is an Algorithm?
An algorithm is a set of instructions for solving a problem or accomplishing a task.
Read 17 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Thank you for your support!

Follow Us on Twitter!

:(