A Fullstack React SPA, using components made from scratch and featuring it's own Express API
Visit the Website
·
Report Bug
·
Request Feature
Table of Contents
Tea Shop is a dummy project that not only could be adapted to a real world scenario, but it also represents one! Divded into stages, it starts with a social media influencer requesting a website from a single junior developer and while initial code includes lot's of mistakes (as one would expect from a junior dev), it progresses to a more advanced and complex solution, using technologies like Docker and implementing a fully structured CI/CD pipeline.
The core goal of this project is to showcase how I would handle a "baddly" structured project, solving problems ranging from the file structure itself, code optimizations, implement tools and features that can improve team workflow and productivity, to the implementation of new features and possibly the simulation of a high traffic scenario where the server would crash.
In the real world, developers are often assigned ongoing projects with all kinds of problems, and it's our job to solve them!
Therefore you can expect detailed information about userflows, tech stack, API documentation, security concerns, code structure, style guides and others!
As mentioned before the project is divided into stages, these represent major deployments and updates. The live website renders the most recent version, but the final code of each stage can be found on their respective branches. Other relevant resources (like design decisions, or development notes), specific to each stage can be found on their own readme as well.
- Stage 0
Stage 1- Development starting soonStage 2- To be created
Chuck is a nice guy with a passion for tea. He has a strong social media presence on instagram, facebook and even an youtube channel where he speaks about the different kinds of tea, it's benefits, and why tea is so good! He's at a point where he'd like to start selling his own products online and would like to have his own website, something fancy!
- Since the main source of traffic will come from his social media channels, having a SEO friendly website is not a priority.
- The platform must be responsible for at least mobile and computer screens
- The user experience should include smooth transitions and animations.
- For now the shop will sell only tea, but the layout should allow future updates to include other items separated by sections
- i.e. tea mugs and pots or proprietary merch like stickers and t-shirts
- An admin page would be useful for managing the shop products, but for the initial stage they can be hardcoded.
- Users should be able to create accounts, and optionally edit or delete them
- Registered users should be able to see their previous orders
- Somewhere on the page, links to his social media accounts should be displayed
Chuck has a friend who is young software developer (hey that's me!) who has as good grasp on web technologies like React, Javascript, CSS and others...
Like any other client, Chuck thinks it's a good idea to assign everything to this junior developer, letting him take care of the design, project setup...choosing whatever tech stack he wishes, implementing security features on the server, and even take care of actual payment processing! After all he IS a developer...and it's cheaper than a full team...
After hearing the requirements from chuck, I started to break down the project into smaller parts. The frontend could be implemented as an SPA, with no specific concerns for speed or memory usage, and it could be hosted on service like Netlify. For the backend, a REST API made with ExpressJS connected to a document databse like MongoDB.
Searching for inspiration, ended up finding this awesome concept by Akib Abdullah.
Then I proceeded to create a Whimsical board where I made a sketch of what the end result should look like, as well as the website's user-flow diagram, server endpoints, and where I documented other technical aspects of the whole app.
Since SEO is not important in this case, React JS seems like a good option. Allowing me to make use of it's huge community and packages like framer-motion to create stunning animations.
- Relevant packages:
- Sass - A superset of CSS that supports functions, mixins, variables and other important concepts for high quality code
- Framer-Motion - Facilitates complex component animations in react, specially for transitions where items are removed from the DOM
- React-Toastify - Displays amazing toast notifications in the easiest, and most costumizable way possible
- Font-Awsome - Icon library
- React-Hook-Form - Enhanced form handling library that works quite well with Zod
Both front and back ends share code related to, but not limited to entities (i.e login, user and order data), parser functions, data structures and validation.
- Useful libraries to implement this include:
- Zod - A library that allows for typechecking during runtime, and that pairs well with React Hook Form
- Simple-HTTP-Codes - Provides constants for HTTP response codes, with jsDocs containing detailed information about each.
- Stripe - Payment processing
Considering the simple needs of the project, Express JS not only is a good option to implement a REST API, but it also pairs well with React! And since we're going to need a database, MongoDB provides an awsome free service for small projects, and is part of the MERN stack (Mongo, Express, React and Node)
- Relevant packages:
- Multer - A library that handles files on express
- Nodemailer - Simplifies the process of sending emails
- Sharp - Used to convert and compress images
The backend will include 3 separate microservices: Mailing, Payment Processing and Chatbot. These won't all be available from stage 0, nor is the project properly organized to support them. Their final implementation will be done in stage 2, and all of them will be containerized with docker.
- Mailing - Using a google cloud project and the gmail api, this service will be used to send registration email, and contact support
- Since this is a portfolio project, I'm using my own email as to promote comunication with a possible recruiter :P
- Payment - StripeJs offers pre-built solutions and also allows for custom components. Integrates well with React, and the server only needs to implement some endpoints to process "payment-intents". Everything else, is handled by stripe.
- Chatbot AI - On the last stage of the project, I aim to implement AI on the project by creating a basic customer service bot to anwser user questions.
Both relational and non-relational models can be implemented, each with their own pros & cons. Although for a single developer, I would argue that a non-relational approach is much easier as it requires less code (due to less typesafe structures), and while developing, allows me to make bigger changes with less effort. Currently these are the only entities we need to store:
- Users
- Authentication data
- User data
- Products
- Orders
It's not complex and mongodb is good in handling large lists of data (which could become a concern for orders).
Therefore MongoDB will be used as it perfectly fits this idea, with it's collections & documents model.
Mongoose will not be used intentionally in stages 0 and 1 in order to create errors and difficulties for stage 2.
Ensuring that the website can grow, both in functionalities and in traffic capacity, I choose Netlify, Render and Mongo DB Altas as service hosts.
- Netlify
- Free starter plan
- Easy deploy & build from github
- Website will be delivered through a CDN, ensuring faster loading times for users
- Render
- Free plan
- Has a downside of suspending the server due inactivity, delaying following requests up to 50s. A warning should be displayed to users, at least when they first visit the site.
- Takes care of basic server configuration, security, and other details, allowing me to focus on the API itself.
- Great features that can be later implemented if needed, like Redis or even cron jobs
- GDPR DPA compliant
- Free plan
- Mongo DB Altas
- Free starting plan with "pay as you go" options
- Support for both simple and complex databases
Stage 0 does not include any CI/CD features, as it's primary focus is to develop a final concrete product that Chuck can see and comment on. Starting from stage 1, tests, actions, workflows and even hooks will be added.
The primary goal of this stage is to come up with something that "Chuck" can use, and give is opinion on. All the requests features should be implemented, except for payment processing.
Secure payments are a difficult subject, and there's lot's of room for failure. Wanting to add this project to my portfolio as quickly as possible... I left this single feature for stage 1 development.
For more information, please check this stage's branch. Here's what you can expect:
- Userflow diagram
- Simple design elements
- Basic API diagram
- Authentication/Authorization ( with intended security flaws )
- Custom mailing service
- Ability to place orders without payment
On this stage, the focus is on code optimization, and CI/CD. As you may have noticed stage 0 does not use a monorepo management tool (like NX or Lerna), there's no code standard, no workflows, deployment is a nightmare, and the components and styling files are messy.
On this branch I will not only take care of these problems, but also implement actual payments with stripe.js, and add some unit and end-to-end tests!
The final stage is where I will introduce new problems like high server traffic, service overloads and more! As the project grows, Chuck also wants to sell more items, and wants to have access to an admin dashboard where he can easily edit the products.
The project will be developed as a monorepo, and will include the following branches:
- Intro
- Live
- main - Current development and testing
- Stage # branch - containing the final code that won't ever be changed
- issues/features - used for development only
main, live and stage branches include ALL the code related to the project, you can compare them to see the application progress.
Data protection was one of my main concerns on this project, and although I don't share it with any 3rd parties, please DO NOT input your real information. Keep in mind that I'm still a young developer with lot's to learn and web security is in no way something that is assigned solely to a junior dev.
That beeing said, precautions like origin request restrictions, session states and http-only cookies, have been taken, and the risk of someone attacking my server or database is minimal...however it is still possible!
For more detailed information, please read each branch's readme file 😃
