Soar Beyond the Skies with React.js
Hey there, my friend! If you’re racking your brain on what to add to your portfolio or looking for ideas to kickstart your next project, you’ve come to the right place! I’ve prepared a list for you with several exciting ideas, along with a brief description and the level of difficulty for each one. Some of them even have a built-in challenge progression, giving you the opportunity to start with something simple and then level up the complexity. Let’s embark on this creative journey together!
Simple ToDo app ⭐️★★★★
You need to create a small application for managing your tasks. In its initial version, it can consist of 1 input field and 1 button to submit the text. Initially, all the information can be stored in localstorage. This task is considered fundamental for newbies in React. Sometimes, people may say that creating a ToDo app is cliché and boring, but it actually touches upon important React elements: hooks and lifecycle methods. Moreover, this task is highly extensible in all directions and can gradually become more complex. If you’re a beginner, you simply must create a ToDo App :)
Weather App ⭐️️️️️️️️️️️️️️️️️️️️️️⭐️️️️️️️️️️️️️️️️️️️️️️★★★
Users have the option to enter a city name or you can retrieve this information using various methods. The next step is to fetch weather data. You can utilize one of the many free APIs available to gather the necessary data. As you create this application, you will delve into important aspects such as hooks, lifecycle methods, browser APIs, and API requests. And always keep in mind that the user interface should be aesthetically pleasing, ensuring a visually captivating experience.
Simple Blog App ⭐️️️️️️️️️️️️️️️️️️️️️️⭐️️️️️️️️️️️️️️️️️️️️️️★★★
Let’s keep it simple for now, shall we? All I need from you is an MD or HTML text editor, displaying the entries, saving them to localstorage and, would be great, to the statemanager like RTK, mobx or any. Sounds easy, but try to lay down a good architecture, as the project will get more complicated. Good luck!
Json form generator ⭐⭐★★★
Trust me, in the future you will be very comfortable with this knowledge. I’ve described quite a lot already, so there will only be a minimum of text next. Take the following JSON and write a component that turns it into a form.
Medium Todo App⭐️️️️️️️️️️️️️️️️️️️️️️⭐️️️️️️️️️️️️️️️️️️️️️️⭐️️️️️️️️️️️️️️️️️️️️️️★★
Well, if you did the app from the list above, you can take it as a basis. Keep in mind that from now on we’re already Full-stack applications. You don’t need to learn backend thoroughly, but you still need to know minimum about it, I promise, with these skills it will be easier for you to work. What I want to ask you to do is to create a user, create a task for an authorized user, add tasks for a specific date and display those tasks with dates. Also, now you’ll be storing everything in the database instead of localstorage. By the way, do you think it would be cool to add categories to tasks? And some colors or icons for each category? Don’t forget to add a task completion status.
Yeah, it already looks a lot more serious, but I’m sure you can do it! Don’t forget to use YouTube, there’s no shame in that!
Medium Blog App ⭐⭐⭐★★
This is where we’re going to get serious! Let’s use Next.js for the client side, it’s pretty cool for applications where SEO is important. Well, I’ll describe some scenarios and you try to figure out what you need to do.
A user can browse the articles on the site
The user can log in
An authorized user can fill out their profile, write articles, delete and archive their articles, like and comment on other posts, subscribe to authors. Each article must have unique meta parameters, for optimization in search engines. Yes, it’s pretty hard at first glance, but trust me, once you start — you’ll get it right away, because you’re good at it!
Real-time chat ⭐⭐⭐★★
It’s a base! This is what everyone who is not so long engaged in Frontend development wants to do. Since I advocate developing everything from scratch, because this will allow you to understand other areas, and here we will do everything ourselves. Look, it’s pretty simple. We have an amazing Soket.io library, it’s good for both client and server. The documentation describes everything very well and in details. Here’s a flow example to help you understand it better:
We go to the site, log in, click create room, a room is created, we get a link to it and can send it to friends and acquaintances. After authorization, they can go into the room and communicate with each other. If you implement this functionality, you’re very good and you’ll go far. Every Frontend, and in our case, React developer should know how to work with sockets minimally.
Short url app ⭐⭐⭐★
Create a Full-stack application that receives a link to any resource on the input and gives a short link, add the ability to watch the number of hits on these links.
Advanced Paint with canvas ⭐⭐⭐⭐★
Drawing with friends can be pretty fun, and if you’ve created a chat room before, you’ve got all the cards to make a socket drawing, go for it!
Сonclusion
I know that Socket.IO is NOT a WebSocket implementation
I know that these ideas are designed for beginners and intermediate level developers
I know there are better libraries
I know there are better architectural solutions
Useful Links
React Documentation — https://react.dev/
Web Api — https://developer.mozilla.org/docs/Web/API
Powerful rich text editor — https://www.npmjs.com/package/react-quill
Good Redux alternative — https://www.npmjs.com/package/zustand
Interesting project — https://fresh.deno.dev/
Let me know if the information was helpful to you.
Happy Hacking!
