You've put in the work and now you have a solid understanding of the React library.
On top of that, you have a good grasp of JavaScript and are putting it's most helpful features to use within your React code.
You've made a great deal of progress... but now what do you do?
How do you bridge the gap between knowing the fundamentals of React and becoming a professional developer?
Many developers run into this problem when they reach this intermediate stage of learning React or any other JavaScript library. They know most of the library itself as well as the JavaScript to use it effectively, but they don't know the next step to take.
Why you should be building apps
After you've learned the basics of React, you need to get comfortable building apps with the skills you've gained. This practice lies at the core of being an effective React developer—knowing how to build apps on your own and utilizing the right tools in the React ecosystem to do so.
But what apps should you be building with React to level-up your ability as a developer?
In this article, we'll go through 5 different types of apps that you should be looking to build after the basic todo app. The great benefit of building apps is that, once deployed, they can be linked to your portfolio as a powerful, immediate way of showing employers your expertise.
For each type of app, I'll cover popular examples that you can use as inspiration, the tools I would recommend to build each app feature, along with a short demo of such an app that I've personally made using React.
How to start building apps with React
Unlike learning React itself, where you can find dozens of articles to dive deeper into any related concept, the process of building an app is largely a self-directed activity without much guidance. If you're getting started building apps on your own, I would recommend searching for articles that teach you the basics of building an app and dive into the app source code that they provide. Even the process of reading code itself will make you a better developer.
If these examples look too daunting to build yourself, remember what you know as a React developer—to break applications down into composable components. Every application must be built piece-by-piece, component-by-component. Focus on building out one feature at a time. With practice you'll get a better sense of how what tools you'll need for the features as well as the common patterns behind building apps in general.
Note: One misconception that I had when starting to build real applications like these was that I had to build an entire backend / API with Node or Python to get the functionality I needed. You don't need to do so. Look into powerful serverless technologies like Firebase, AWS Amplify, or Hasura that give you a complete backend out of the box without the need to create and deploy one yourself. Invest in tools that make you more productive and save time.
Build a Social Media App
If I had to recommend only one app for you to add to your portfolio, it would be a social media app. Twitter, Facebook, and Instagram among other popular apps are quite sophisticated and include a ever-growing number of features to keep users engaged. On top of that, it's the kind of app you likely know best regarding how it should function.
There are a number of features common among almost all social media apps: the ability for users to make posts with text and/or media files, a live feed of those posts, enabling other users to like and comment on posts, as well as user authentication. And once you've got that down, you can add profiles for each of your users, where they can personalize their account as well as manage the users they're following.
App examples: Instagram, Twitter, Snapchat, Reddit
Technologies to use:
- Create React App or Next.js to make a dynamic UI of posts, likes, and messages
- Firebase, AWS Amplify, or Hasura (using GraphQL with subscriptions) for realtime data
- Serverless functions like AWS Lambda or Firebase Functions for notifications
- Cloudinary or Firebase storage for uploading pictures or video
Build an E-Commerce App
Pick a few of your favorite sites and I guarantee at least one of them has an e-commerce app embedded in it, even if it's just a small storefront. E-commerce apps are ubiquitous and I bet that you'll be called upon to build one at one time or another in your career as a developer.
It is tempting to build an impressive, large-scale e-commerce platform like Amazon, but I would recommend working on something smaller and more focused. Instead of a marketplace that provides all things to all people, go with an industry that interests you. For example, if you like home goods, you might take a look at what Crate & Barrel or Williams-Sonoma have built for their sites.
Aside from products, e-commerce apps may provide a service to consumers. If it is a service that is provided locally, an interactive map could be added to the app to provide for the service provider and customer to know each others' location. Food delivery applications such as UberEats and Doordash, which require the location of the person ordering the food come to mind.
Regardless of what's being sold, whether it's physical or virtual, every e-commerce app will consist of some storefront with the product or service details. If users can purchase multiple products at once, it should have a shopping cart where users can manage the products they want to buy. Finally, every e-commerce app needs a checkout process where users can either purchase their products anonymously or once they are authenticated.
Popular examples: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy
Technologies to utilize:
- Create React App or Gatsby for the storefront and displaying products
- Stripe with the package react-stripe-elements for handling payment processing
- Serverless function like Netlify / AWS Lambda to handle checkout process
- Algolia for lightning-fast product searching
- Snipcart for easily creating a cart and managing cart products
Build an Entertainment App
This is the broadest of all of the categories. What do I mean by entertainment? An app that is focused around a certain kind of media. This could be movies, podcasts, or music to name a few. Some great examples of this, respectively, would be Netflix, Audible, and Soundcloud or Spotify. If you would include art or design in this category, we could add sites like Behance or Dribbble to the list.
What's interesting about this category is that many entertainment apps border on social media apps. For example, an app like Tiktok, which features short, imaginative videos, is driven by high user engagement. Another app like YouTube is centered upon user interactions through likes, comments, and subscriptions.
Think about what type of media or entertainment mosts interests you and see if you can build a simple platform around it, where users can login and save the content that they like. After that, look into adding social elements that make it possible to add comments to that content, like it, and share it with other users on the platform.
Popular examples: Youtube, Netflix, Audible, Spotify, Tiktok
Technologies to utilize:
- Create React App, Next.js, or Gatsby to create the app UI
- npm package react-player for playing media
- Cloudinary or Firebase storage for media uploading
- Algolia for searching media by name (i.e. audio track, video, movie, etc.)
Build a Messaging App
Messaging apps are huge. You likely have a free messaging service like WhatsApp or Viber as an app on your phone, or one built into your social media platform, like Facebook Messenger. Services like Intercom with instant messaging are also available for web apps so companies can provide immediate customer support to their users.
Any messaging app is going to consist of a conversation with two or more people where messages are sent in realtime. Similar to the social media app, I would recommend a service such as Firebase or Hasura that transports data via WebSockets for messages to be displayed immediately in the conversation.
The majority of messaging apps are on mobile devices or tablets. If this isn't your first app clone, this is a great chance to move beyond the web and build a mobile app with React Native. Better yet, you could build a web and mobile messaging app simultaneously with a package like React Native Web.
Popular examples: WhatsApp, Viber, Discord, Messenger, Slack
Technologies to utilize:
- React Native or React Native Web to build as a mobile app or hybrid app (web + mobile)
- Firebase, AWS Amplify, or Hasura (using GraphQL subscriptions) to send messages in realtime
- Cloudinary or Firebase storage for sending messages with image or video content
- npm package emoji-mart for a slick Slack-like emoji picker for users to include in their messages
Build a Productivity App
This probably the easiest type of app with which to begin, considering there are so many tutorials of basic productivity apps out there. When I speak of productivity apps, I'm referring to note-taking apps, apps for managing teams and task lists. Generally speaking, anything that helps you accomplish a certain task or be more productive.
What's great about building a productivity app first is that it provides a good introduction to app building because of the relative simplicity of many of the features. You can start with something simple, such as a text editor to easily write formatted text with markdown and then expand upon it. Then add the ability to save text as individual files on your computer. After that, a feature to export that markdown as HTML to write formatted emails.
To start building a productivity app, ask what features an app could have to make your daily schedule easier and go from there.
Popular examples: Todoist, Notion, Things, etc.
Technologies to utilize:
- Create React App for web or React Native for mobile
- npm package react-markdown to display markdown in your app UI
- npm package react-codemirror2 for writing code in your notes
- npm package react-draggable for re-ordering list content by clicking and dragging
Become a React Developer in 5 Weeks
React is hard. You shouldn't have to figure it out yourself.
I've put everything I know about React into a single course, to help you reach your goals in record time:
Introducing: The React Bootcamp
It’s the one course I wish I had when I started learning React.
Click below to try the React Bootcamp for yourself:
Click to get started
Top comments (33)
Great concept.
Some constructive criticism: clearly quantity over quality here. Why not build 3 apps or even 1 app but that looks like a real business. I doubt a person who knows how to build an ecommerce, social media and a chat app will not be able to build the productivity or entertainment app. More is not always better.
It would be constructive, had I not mentioned it in the article a couple of times.
That in multiple cases, only one may need to be built (see the social media app section) or that one app can incorporate several of these app types (entertainment app section).
Yep, my bad. I guess what I was referring to is how "complete and finished" the apps actually look. Unfortunate (or fortunately) in web development and the apps business in general, looks(how pretty the app looks) matter more than we think. I personally will be buying this: newline.co/tinyhouse not because the app is revolutionary o with better features than the ones you will build, but I will have an app that looks like a finished product once I finish the course.
If you're going to spend some time building these ideas, why not spend it on building something meaningful? These apps will be just glowing in your portfolio, but are totally useless. Why not solve somebody's actual problem with your skills? You might also suddenly grow a business this way.
Why do you think every developer makes the canonical todo app? From your perspective, that would be "useless". Is every developer teaching how to make a notetaker or todo app in the wrong?
To start building apps, we make what's familiar. What we use and know. And that doesn't therefore make those apps useless because we've seen them before or it wasn't an original idea. Only a very special few can start solving peoples' problems with code right off the bat. People just starting out building apps don't have a concept yet of how to structure it. That's what I've tried to do here--to get React developers to start thinking in terms of what they can build and inspire them to work on something meaningful.
I've built all of the apps that you see in the gifs above. Having these apps on my portfolio has helped me get work as an app developer and consultant. This is a proven approach to getting hired and moving ahead in your career. I bet many ambitious developers looking to get ahead would find that the polar opposite of "useless."
And finally, I want to make clear that I've echoed the need to build apps you find value in throughout the article, for example: "ask what features an app could have to make your daily schedule easier and go from there."
I mean they're useless in terms of utility - probably no one will ever use it, it will just rot in your GitHub repository. Maybe I wasn't clear enough - I don't mean they're totally useless, of course they give value in terms of getting a job. I could overlook that this is a "Learn React in 2020" series for newcomers, sorry 😅
Jakub, I directly talk about making them based off of utility. Please read the post!
Still waiting for your answer about todo apps, by the way.
Because it's an easy example to grasp the technology you want to use.
I've read the post. It doesn't matter that you talk about it. You won't use apps which you've created for your portfolio as it doesn't make any sense (there are plenty of free services out there that already solve your problem). So IMO their only purpose is to learn something, or have something to show off. They will still rot in the repository.
I disagree. It's your choice. There's no "magic" here. Just find a problem which no one solved already, or build something better than someone else.
My point is: learn to build products, not portfolios and apps to show off. Building 1 simple product and giving it to users is a much bigger achievement than building 100 example apps for your portfolio. That's my opinion 😃
I'm interested in helping people become professional React developers, get hired, and level-up in their career, not turn them into entrepreneurs.
Any app you build will be more than useful to you and your career, not counting the new techniques and tools you get a chance to try out and practice. I can't count how many apps I built where the only utility was the chance to apply a new technology that just came out.
And no, they don't 'rot'. In multiple cases old applications that according to you were 'rotting' in my Github have been the basis for useful products that are the backbone of my business today.
Stop repeating falsehoods based on your 'opinion.' This is based on fact--build apps, build your portfolio and you will get ahead in your career.
This is not good advice. People need guidance before they build "products", whatever you mean by that. You admit it yourself: People build todo apps because "[they] are an easy example to grasp the technology you want to use."
Yes--they need to grasp the technology by building apps before they build products. This is what this post is about. There's no need to reiterate your opinion again.
That's exactly what I've said 😃
It's just my opinion, you can disagree with it, just like I can disagree with yours 😃
No, they can build products and learn by doing it. No need to create apps just for portfolio. Your portfolio should consist of built products, not example projects for learning purposes. They might work for some of the employers, but clients don't care.
But again, this is just my opinion 😃
I'm just trying to explain as I clearly see that you don't get my point 😃
Nice. That eCommerce example though 👌🏻
Thanks to you, Jamie!
Great example project ideas! I think building things is the best way to learn.
Hey Travis! I've tried to reach you via Twitter but couldn't 🙁 Are you planning to bring back up Fohkuhs? The download doesn't work 😭
Hey! Sorry about that! I didn't realize how many people used it when I stopped supporting it. 😅
I've added it to my list to revisit, hopefully soon!
Eagerly waiting for your course to start in React12.
Knowledge is wealth, not money. There are many who struggle to understand the basics of programming. And want to give themselves a chance to learn it in a proper way. Books can give you a blueprint, but it's hard to find a teacher who learned it in a difficult way and understand 80% of folks dilemma.
I appreciate Reed, for starting this initiative. It doesn't matter how many apps we build, its about to know - how apps are built.
I really don't understand who has time for this? Any one of these projects, if created properly should take 3++ months work?
Don't get me wrong they're all great ideas individually, and I would be super impressed to see any of them on a developers portfolio I was interviewing; but by no means would I ever expect, or think that a developer NEEDS to create all of this.
You could speak to me personally if you want real answers to these questions. I've made all of the app examples in this post and taught thousands of others to do the same.
Sorry if I came off as an ass, don't get me wrong; as I said they're all great project ideas, and I appreciate you taking the time to suggest them.
My problem is more with the unrealistic expectation our industry has on developers to dedicate huge quantities of (non-work) hours to work on personal projects, something we really don't see to such an extent in other industries.
Personally, I feel like articles like this, implying that developers NEED to spend upwards of 15 months (assuming 3 months more or less for each of these projects) of free time working on a set of large scale applications only further accentuates this trend.
Case in point:
How do you bridge the gap between knowing the fundamentals of React and becoming a professional developer?I wouldn't expect my senior dev's to have a portfolio of side projects this substantial - let alone someone who's only trying to bridge the gap to becoming a professional developer.
Great read! I haven’t been on here long, but this is probably my favorite (and most useful) article so far. In fact, I’m already creating that social media app as I post this.
I should get back on that.
Thank you, Oscar. Enjoy!
great job Reed. It would be fun to learn building real time practical projects and moving beyond "counter" and "Hello world" examples. Looking forward to it.
I Will certainly try one of those, but with Svelte :)
i love svelte too! but unfortunaly where i live pratically doesn't exist jobs with svelte requirement
This is a great article. Nice work for pointing these essential things out. These projects will definitely lighten up your portfolio. The beginner having these projects under there belt will definitely get a job of a React Developer. My special priority goes to ecommerce apps which will contain most of the features. Building apps like UberEats clone, amazon, etc can have a best impact on portfolio. For inspiration, you can check out some of the best UberEats clone app in the market.
great article, I am a python developer and currently learning React.js.
React.js is awesome.
i actually prefer watching a record. i don't understand the reason behind why it's weekly lessons. i want to skip parts that i already familiar with.
Entertainment lit.
Create a static website using Dev.to, Github, stackbit in less than 10 minutes.
CodePerfectPlus ・ Jul 22 ・ 2 min read
Hey I was wondering about the react 12
Are all of it for free?
Some comments have been hidden by the post's author - find out more