Project Structure & Specifications
The customer end of BFshop (BFcustomer) is part of my main website folder structure, as it started as a simple project. As the project grew, I decided to build the rest (BFmerchant) in a separate folder for better organization. BFshop will live on a subdomain, so it remains accessible from the main site.
Dependencies
- Tailwind CSS for styling (my preferred tool)
- Prisma for database connection
- Neon as the database (after issues with Supabase)
Setting up Neon was challenging, but I learned the basics of attaching a database to a project by doing and asking for help when needed. Even if I don’t know every command, I now understand the process better.
Styling Consistency
If I could rebuild my site, I’d set clear styling rules from the start. For this project, I’ve created lists for spacing and typography per screen size. I’ll keep fonts and colors simple and professional.
For example:
Heading to body spacing
- h1 to next text: mb-4 md:mb-6
- h2 to next text: mb-3 md:mb-4
- h3 to next text: mb-2 md:mb-3
Grid/card gaps
- Mobile: gap-4
- Tablet: md:gap-6
- Desktop: lg:gap-8
API
Both BFCustomer and BFmerchant will communicate with the database via the API in BFmerchant. This may not be perfect, but it’s a workable structure for now.
The APIs will enforce rules that govern communication between front and backend, and will be particularly relevant when it comes to oversight of AI activity
AI Disclaimer
I use AI as a mentor and assistant, especially for learning new concepts, repeated structures, and complex tasks. My goal is to learn and understand, not just copy-paste. I’ll also use AI to audit the project as I go.
Next Steps
- Practice writing APIs
- Deploy BFmerchant on a subdomain of benfosterdev.com
- Wire up APIs to BFCustomer
Planning the project like this is a big step for me. For my main website, I always rushed into building because I was excited to get going. The extent of my preparation was mapping out the intended structure of each page and how the divs would look, with minimal planning on what styling options would be used to produce a cleaner and scalable design. I also gave no thought to the overall structure of the site and how each element would work together. This is partly because it was planned as a purely frontend project, so data was always an afterthought. Now, going into BFshop, the structure is clear in my head, meaning I can accurately map out each section's basic layout enough to give me 'wall sockets' where the API 'cables' will plug into.