What is this?
This resource is your guide to project ideas to help push your coding journey.
Some of the projects like building a website, creating a custom hook, and
adding search to your existing website will help give you motivation for ways
to learn by doing. While a lot of tutorials and project ideas on the internet
help you learn a tool, they often have you building the same thing over and
over — like a to-do app. We’re taking a different approach here, where each
project is something you might find out in the real world with a project brief
like you might find on the job.
Why is this?
A lot of developers struggle with a similar pain point — they want to build
more projects, but they just don’t know what to build. One of the best ways to
grow as a developer is to keep building as it gives you immediate hands on
experience with the tools you’ll use in your career. The goal of 50 Projects
is to provide both aspiring and seasoned developers with an idea that will
allow them to learn a new tool or develop skills to start their career.
Who is this for?
Those who want to learn. You should have at least a basic understanding of
React or be willing to learn while doing. Ultimately, the examples and
tutorials are based in React but the projects should be suitable for any
language or framework you’d like to work in. All of the projects here give you
an opportunity to put real-world use cases into practice with a foundational
starting point. The hope is that this eBook will help you prepare yourself by
learning new tools while building projects that could actually exist!
How do I get started?
Picking a project
Try not to think too hard and stress out over which project you start with.
The good news, is you’ll always have this list — so if you get started on one
and it isn’t for you, you can easily come back and try another. Later on,
you’ll also find that there are some Track ideas to help get you started.
These Tracks are a ”recipe” that you can follow to achieve a larger goal with
a mix of multiple projects.
Blasting up each level
All projects have 3 distinct levels to complete as part of the project
challenge. Want to try a bunch of different projects? Maybe you’ll only
complete Level 1 for each project. Want to play completionism? Try finishing
all 3 levels for each project! Each level will bring you a new challenge to
the project that you can build on from the last.
Picking the right tools
Tools & frameworks
While each project specifies some ideas of what tools you can use, these
aren’t requirements. You can use whatever tools you want to work through each
project. That said, part of the goal is to learn, so trying out one of the
projects with a tool you never used before could be a good way to get your
feet wet with a new framework or tool!
Taking advantage of resources
Each project has a set of resources that are there to help you along the way.
This includes tutorials, documentation, or other kinds of information that can
help you learn through an existing project or demo that follows a similar
track as the project itself. Try giving each project a shot without the
resources! If you get stuck, you know it’s there to help.
Starting with the right layout
There’s a layout idea you can use for each project. While it’s not required to
be used, working from a set of wireframes or general idea of a layout is a
good way to understand the direction you’re taking on a project. Feeling like
you want an extra challenge? Try recreating the layout with more detail in a
tool like Figma before you dive into the code.
Projects:
01) Business & Real-World
• Marketing Website
02) Personal & Portfolio
• Resume / CV Website
03) Clones
• Twitter
Let's Start
01) Business & Real-World
Marketing Website
Create a marketing website landing page and for a technology product.
Brief
The marketing team for the company you work for just launched a new product.
They need a detailed marketing plan that includes a website and landing page
dedicated to driving people to learn about the product and ultimately purchase
it.
Level 1
Having a website is a great way to showcase a product with the ability to
provide as many details as possible. Create a new website that highlights the
great features of the product and provides in-depth information about each
feature. The pages should include: • Homepage with photograph and high level
overview • Feature pages linked from homepage with more details
Level 2
Just because you made a website, doesn’t automatically mean people will
purchase the product. Create a landing page as part of the marketing website
that drives people to sign up with a form for more information.
Level 3
Ultimately people need to purchase or sign up for the product and to do that,
they need a way to contact the sales team. Create a new page with a form that
will allow people to contact the company if interested in the product. Include
a “Call to Action” link at the bottom of every page on the website except for
the contact page itself that links to the contact page.
TO DO
- v Think of a product name
- v Gather free pictures
- v Create a homepage
- v Create feature pages
- v Create a landing page
- v Add a signup form
- v Create a contact page
- v Add a contact form
- v Add contact links to site
Toolbox
- · Unsplash
- · Pexels
- · Gatsby
- · TakeShape CMS
Layout Idea
02)
Personal & Portfolio
Resume / CV Website
Create
a with your website work experience that can be used as a or .
Brief
You’re looking for a new job in the tech world. Every
company asks for a resume. You also think it’s a good idea to make it available
publicly and a great way to do that is to demonstrate your development skills
by creating a resume website.
Level 1
The most important information on a resume is your contact
information, skills, and work experience or education. Create a new website
that provides a way for a potential employer to contact you and a list of all
of your skills and relevant experience.
Level 2
When companies look for new candidates, they also like to
know a little bit about who they are as a person. Update your resume website to
include links to social accounts that show your interests and include
personalized touches that represent you as a person.
Level 3
You like to work on code on your free time. You’ve created
some open source projects or at least have contributed to some. Update your
resume website to include links to GitHub projects to show what you’re working
on. Bonus: make it automatically update sorted by star count.
TO DO
- v Create a new website
- v Add contact information
- v Add work experience
- v Add education
- v Add social links
- v Add personality
- v Add GitHub projects
- v Automate GitHub sort
Toolbox
GitHub Actions
03)
Clones
Twitter
Create a Twitter
clone that post public messages.
Brief
Twitter is one of a few social media giants that have
captivated the world. Every day there’s about a half of one billion tweets that
get published between everyone’s feeds. But what if we want our own private
Twitter where we keep our data?
Level 1
The main differentiator is Twitter is made up of a bunch of
short messages that represent someone’s expression at a moment in time. Create
a page of short messages that you can dynamically add new content with a
database.
Level 2
We’ve all seen what happens when someone’s Twitter account
gets hacked, we don’t want that to happen to our page. Require authentication
with a login form in order to gain access to add new messages.
Level 3
Your messages are getting pretty lively, but you’re sending
them out all by yourself. What if we made it more fun by inviting some of our
friends? Add the ability to create new accounts allowing others to post
messages to their own page.
TO DO
- v Create page of messages
- v Create database
- v Store content in database
- v Request content from DB
- v Create message form
- v Add new messages to DB
- v Add authentication
- v Require account login
- v Add create account form
- v Create new accounts
People
also ask
- What are some beginner React projects?
- Is React JS beginner friendly?
- Can you learn React in 3 days?
- What is the best practice to use react JS?
- Is React easier than JS?
- Is React JS easier than NodeJS?
- Is React hard for beginners?
- Is React worth it for small projects?
- Is React good for big projects?
