(This hosted version won't have the cache layer, due to the costs of hosting it on AWS)
👉 I probably won't implement everything the original project has, because I'm focusing on build my portfolio with the majority of the technologies I'm studying, but I'll try to implement the most important features.
This project is a more updated version of the current Lojinha official website, where I better showcase my most recent learnings in Front End development, implement best practices and open it to a public repository with the authorization of the client.
When I first develop this freelance project on Jan/2020, the client wanted a new website for their store, which would be used by their customers to see the products available in the store. They wanted a project with no recurrent costs (such as a CMS or a database), so I developed a script to read their Google Sheets spreadsheet and generate a JSON file with the products data, which would be used by the website. So yes, Google Sheets is my database and API.
Now I see that the users had a long repeated initial request time, so I decided to rebuild this application with an architecture that uses server-side rendering and caching. To achieve this, I'm using Remix with Memcached, hosted on AWS.
To this new version, I'm using Remix with Memcached, hosted on AWS. Although this project doesn't need a high availability solution, I'm using AWS because I'm studying for the AWS Certification, so I'm using this project as a playground.
Probably this would not be the best solution for this project, because the client still doesn't want to pay for a hosting solution and this solution has EC2, Load Balancer and Pipeline costs.
This version has a mixed solution, but although it still needs AWS for the Memcached instance, Netlify hosts the application on a free tier, so it's cheaper.
I'm using Netlify to host the website and AWS Lambda to be an interface between the database and the cache layer.
In addition, the EventBridge trigger is used to update the cache layer when the database is updated, so the website never has to wait the database response again and would only communicate with the cache layer.
- TypeScript: Language
- React: JavaScript Framework
- Remix: Server-Side Rendering framework
- Netlify: Hosting solution
- Amazon Web Services (AWS): Cloud solution
- Memcached: Cache solution
- Material UI: Component library
- Zod: TypeScript validation library
"Lojinha Importados" is a Brazilian store focused on general electronic products, selling its items in a physical store and on marketplaces such as MercadoLivre and its own virtual store.