Repository for official site of TheAroidHouse. Built for @marcusonaroids.
INSERT DEMO GIF HERE
Client: NextJs, ChakraUI
Server: NextJs API routes, Vercel
Content Management: CosmicJS
Database: MongoDB
Clone the project
git clone https://github.com/DanKarDev/the-aroid-house-official-siteGo to the project directory
cd the-aroid-house-official-siteInstall dependencies
npm installStart the server
npm run dev3 step process to deploying the site properly on vercel
- Fork this repository into your own GitHub account.
- Using vercel, deploy the repository. Learn how to deploy on vercel
- Put in the following enviornment variables. Learn how to add env variables on vercel
# for logging into /admin to see all orders
USERNAMES
PASSWORDS
ADMIN_EMAIL
NEXTAUTH_URL
# for storing orders
MONGODB_URI
MONGODB_DB
# for email invoice sending to customer
SENDGRID_API_KEYthe-aroid-house-official-site/
┣━━📁 documentation # assets for README.md
┣━━📁 domain # we are following domain driven design approach
┃ ┣━━📁 application
┃ ┃ ┗━━📁 order
┃ ┣━━📁 infrastructure
┃ ┃ ┗━━ MongoOrderRepository.tsx
┃ ┗━━📁 models
┃ ┣━━📁 aggregates
┃ ┣━━📁 entities
┃ ┗━━📁 infrastructure
┣━━📁 public # public assets, favicon, SEO head images
┣━━📁 src
┃ ┣━━📁 components
┃ ┃ ┣━━📁 admin
┃ ┃ ┣━━📁 buttons
┃ ┃ ┣━━📁 cards
┃ ┃ ┣━━📁 cart
┃ ┃ ┣━━📁 checkout
┃ ┃ ┣━━📁 item
┃ ┃ ┣━━📁 layout
┃ ┃ ┣━━ Landing.js
┃ ┃ ┣━━ NotFoundAnimation.js
┃ ┃ ┣━━ ShopItems.js
┃ ┃ ┗━━ ThankyouAnimation.js
┃ ┣━━📁 context
┃ ┃ ┣━━ CartContext.js
┃ ┃ ┗━━ PaymentContext.js
┃ ┣━━📁 libs # MongoDB connector
┃ ┃ ┗━━ mongodb.ts
┃ ┣━━📁 pages
┃ ┃ ┣━━📁 admin
┃ ┃ ┣━━📁 api # serverless functions
┃ ┃ ┣━━📁 shop
┃ ┃ ┣━━ 404.js
┃ ┃ ┣━━ _app.js
┃ ┃ ┣━━ _document.js
┃ ┃ ┣━━ cart.js
┃ ┃ ┣━━ checkout.js
┃ ┃ ┣━━ index.js # main page
┃ ┃ ┗━━ thankyou.js
┃ ┗━━ theme.js
┣━━ .env.local
┣━━ .gitignore
┣━━ README.md
┣━━ config.js
┣━━ next-env.d.ts
┣━━ next.config.js
┣━━ package-lock.json
┣━━ package.json
┗━━ tsconfig.json
We are following the C4 model for visualising software architecture
We did our prototype using figma Click here to view
Took inspiration from Dmitry Lauretsky
Animations from LottieFiles
Major driving factor of our decision is cost. We need to keep cost as close to zero as possible. For to that cost driving factor, we have decided to go with
We considered two. ChakraUI and TailwindCSS.
TailwindCSS definitely gives better customizability over ChakraUI but the initial learning curve is steep for us. Our team is well versed with ChakraUI but no experience with TailwindCSS. For that reason, we decided to go with CharaUI for this project. We will try out TaildwindCSS for next project.
NextJS. Our team is well versed in NextJS and we have little to zero developer friction/initial learning curve time is reduced. Time to delivery reduced.
Also NextJS is built upon React framework. We could make use of multitute of community desigend components.
Vercel hobby plan has generous limits. 100GB of bandwith per month. If the site grows too big then will have to migrate over to the team plan. See vercel plans pricing here.
We considered two. Strapi and CosmicJS.
Strapi gives user and developers more flexibility and customizability. One big con is that it has to be self hosted.
CosmicJS gives user easier to use dashboard (compared to Strapi) to manage content. We decided to go with CosmicJS as it has generous limits. 10,000 API requests per month. It is also a managed service. See CosmicJS pricing here.
We initially wanted to use firebase firestore. We found it hard to integrate with NextJS/Vercel serverless functions and thus went with MongoDB free tier M0 shared cluster.
We lose the ability to have realtime update of data which is not required in our current system. See MongoDB pricing here.