Hey there!

We've been talking to many of our subscribers about the struggles they face in web development...

And there were two things we kept hearing:

1. Most people prefer to learn through projects, and
2. There's a lack of inspiring projects to help you learn.

Well, we'd like to change that.

We've come up with a list of five projects that we think you'd like to build (and learn from) – but we want to start with the best one – so before we go ahead and build them, we want to know what you think!

Here's what we've got so far:

Project #1: Build a SaaS app with recurring payments.

What you'll learn:

• User authentication
• API key authentication
• Taking payments
• Setting up billing cycles and reporting
• Extensible CRUD functionality
• Custom webhooks, and
• Cache management & web push notifications

What we'll use:

• Full-stack GraphQL with Apolo/Prism/Yoga
• React on the frontend
• Node.js for the serverless API backend (Netlify, Zeit Now, Firebase etc)
• Mongo DB via mongoose 
• Service workers
• React Spring for UI animations
• Styled Components

Project #2: Build an eCommerce platform with payment processing.

What you'll learn:

• Using GraphQL with Vue.js
• Optimistic UI updates using GraphQL
• How to build out an API within Node
• How to integrate Stripe into a Vue/Node project to accept payments
• User authentication / account creation 

What we'll use:

• GraphQL API
• Node.js
• Stripe for accepting payments
• Vue.js on the front end

Project #3: Build a habit tracking app with social features.

What you'll learn:

• User authentication
• CRUD
• Routing
• Setting up comments/ upvotes and sharing
• Data persistence
• Basic animations
• Events - drop and drag functionality, graph / charts, cards and other cool UI stuff

What we'll use:

• React (React Hooks, ES6)
• MongoDB
• React Router
• Next.js
• React-Spring (Animation)
• Style-components / SASS  (Styling)

Project #4: Build Elasticsearch into a Node app.

What you'll learn:

• Integrating Elasticsearch into an application with an existing DB
• Elasticsearch functionality
• Effective indexing within Elasticsearch
• Pagination of search results
• Integration of Elasticsearch into a Vue.js app.

What we'll use:

• Node.js
• MongoDB
• ElasticSearch
• Vue.js

Project #5: Build a Meal Plan app with GatsbyJS.

What you'll learn:

• How to use GatsbyJS
• React + styled components 
• Firebase for data storage 
• Make the app work offline
• CSS Animation beween screens
• Getting the application live and hosted on Netlify

What we'll use:

• GatsbyJS
• React
• Styled components
• CSS
• Firebase
• Netlify

Have a better idea? Tell us!

If there's a project you'd rather see us build, let us know!

We look forward to sharing our new projects with you and inspiring you to learn new skills!

SitePoint Team