Introduction
The one project which will impress anyone. Whether you are an experienced developer or a complete newbie this project will benefit you by teaching you how to create a massive full-stack application. This project will impress anyone you show it to. This project can be built with any tech stack. As this is a full-stack project, it needs to have a client and a server. The client can be anything you would like, some examples include: a website (React.js, Svelte, Angular, Vue, WebAssembly, Vanilla Javascript), a GUI (Python, C#, C++, Javascript), and a mobile app (React Native, Flutter, Java, Kotlin, Swift, Objective-C). The server can be written in any language using any framework. The database can be whatever you would like: PostgreSQL, Redis, MongoDB, MySQL, etc.
If I were to build this project my tech stack would be the following:
- Client (Website):
- React.js/Next.js
- Chakra-UI
- Tailwind CSS
- Apollo Client
- Framer Motion
- Formik
- Database:
- PostgreSQL
- Redis
- Server (Typescript):
- GraphQL/TypeGraphQL
- Apollo Server
- TypeORM
- Node.js
Remember, this is just what I would pick, and you can use whatever tech stack you would like!
What will this project teach me?
This project will teach you the following:
- Connecting to a database
- Connecting to a server
- Security
- Styling
- Testing
- Hosting
- DevOps
- How to build a server
- Fetching
- Debugging
- Developer Environment
- The latest standards in the full-stack industry
- Source Control/Opensource
What are the prerequisites to this project?
This project is an intermediate to advanced project. I would recommend having good knowledge of the backend and client language that you choose. Also, I would recommend having experience in the frameworks you choose for the server, database, and client. You will also need a code editor, I would recommend VSCode. Personally, I felt ready to tackle this project when I was 3 months into learning full-stack development. You can save this post and come back when you are ready or let's dive right in!
The Project
The project is... an e-commerce site. Some e-commerce site examples include a book store, a general-purpose store, a food store, clothing/styling store, a tech store, and much more. An e-commerce site is just an app in which you can buy/sell products online. Some companies which are an e-commerce site include Amazon, Airbnb, eBay, and more. This is the ultimate project because it will encapture the most concepts any project could encapture: security, frontend, server, database, and more.
Features:
- Secure login/logout/register (if you want you can also use Google, GitHub, and others authentication)
- Cookies, JWT, sessions, local storage
- Forgot password/change password email link
- Tokens
- Routing
- User page with their username, profile picture, bio, and recent purchases
- A store where all the products are available
- A place where users can add products to sell
- A realtime shopping cart
- A payment system
- Stripe, PayPal, Google Pay, Apple Pay
- Realtime messaging between sellers and consumers
- Smooth animations
- Dark mode/light mode
- Deleting products they are selling
- Reporting and banning users/products
- Confirm account email
The possibilities are endless!
Conclusion
I wish you the best in making your own e-commerce site! If you have created one, please share it in the comments so that we can have a look at it! Thanks for reading.
Henry
Top comments (0)