Guideline for building project

Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.

---

Today I wanna share my checklist, step by step to build a project from zero to hero. I have three stage: preparation, development and maintenance.

This post will cover the first part - preparation. I will keep updating whenever I remember anything else. You may need to read my old post to see how I reduced time for development process, especially for backend. Any feedback will be highly appreciated.

High level Steps

Follow these steps:

• Buy a domain.
• Follow next part to setup environments.
• Find solution for these problems:
  • Law/Copyright related problems.
  • Your site terminologies and policy.
  • User requirements and Software requirements.
  • Change logs and roadmaps.
  • How to get feedback from users and how to response.
  • Define basic flow for designer.
  • Define all Call-to-Action(s).
  • Define all URLs.
  • Define all sub-domain.
  • Think about migration, replication from any environment to production environment.
• Prototyping your product
  • Design Wireframe using balsamiq.
  • Prototyping using axure.
  • Design basic database using dbdiagram.io.

Technical used

Related technologies:

• GraphQL is the core.
• Firebase for Authentication and Cloud Functions.
• Google Analytics.
• Sentry for error reporting.
• GatsbyJS for frontend development.
• Hasura for auto generating APIs from database.
• Cloudinary for static resources hosting.

Related tools:

• Gitlab to store source code and your official documentation should be placed here also.
• Slack to get all notifications.
• Netlify is everything you need for deployment.
• Heroku fastest way to deploy Hasura.
• Cloudflare is my favorite CDN and more.
• balsamiq for mockup.
• axure for prototyping your product.
• dbdiagram.io for fast database modeling.
• Trello is free, simple, fast and easy to use for task management.
• stackedit.io is my favorite online markdown note.

Technical Setup Steps

Some note:

• Only have two environments: development and production.

Following these steps:

• Setup Gitlab project and wiki pages.
• Setup Firebase project.
• Setup Google Analytics.
• Setup Sentry.
• Setup Netlify deployment for static files.
• Setup Heroku deployment for Hasura.
• Setup Cloudinary.
• Save all configurations in Gitlab Wiki page.
• Slack integrations.
• Domain configurations.
• Resources Management.

Environment Setup Checklist

Gitlab

• Create new project and wiki home page to link all your wiki pages created later.
• Create new wiki page for "Technical Configurations" and link to above home page.

Firebase

• Setup Firebase projects for both environments. After this steps, we have both Firebase config object for both environments.

Google Analytics

• Setup Google Analytics, we just need only one property. We should disable Google Analytics in development environment. After this step, we should have Tracking ID string.

Sentry

• Setup only project for both environments. After this step, we should have Sentry DSN string.

Netlify

• Setup new site in Netlify from Gitlab repository.
  • Check domain and sub-domain configurations.

Hasura

Follow these steps to setup development environment for Hasura. We should ONLY create production environment after testing development environment successfully.

• Deploy Hasura to Heroku.
• Secure Endpoint.

Cloudinary

Create an account for both environment or multiple account for each environment, totally optional.
Folder structure:

• common: for all resources used for all environments.
• development: all resources used for development environment only.
• production: all resources used for production environment only.

After this step, we should have some variables like API Key, API Secret and some URLs for CDN.

Save Configurations

Update all configurations into "Technical Configurations" wiki page created before.

• Two Firebase config object for both environments.
• Google Analytics Tracking ID.
• Sentry DSN.
• Hasura configurations:
  • HASURA_GRAPHQL_ADMIN_SECRET (development environment).
• Cloudinary:
  • Cloud name.
  • API Key.
  • API Secret.
  • API Environment variable (optional).
  • Base delivery URL.
  • Secure delivery URL.

Slack Integrations

All below are minimum requirements.

• Source code:
  • New Pull Request.
  • New push on default / protected branches.
  • New pipeline on default / protected branches.
  • Wiki pages changes.
• Deployment:
  • New deploy started.
  • Successful deploy.
  • Failed deploy.
• Task management:
  • New task created.
  • Task is ready to be reviewed.
• Analytics and Report:
  • Goal achievement.
  • Error occurred.
  • New period report.
  • New feedback from user.

Domain Configurations

• Setup some notable DNS records:
  • A records for domain, sub-domain, api, etc.
  • MX/TXT records for email.
• Setup nameservers (Netlify/Cloudflare).
• Force HTTPS + SSL/TLS.
• Cloudflare nice to have checklist:
  • Setup Firewall.
  • Setup Rate Limiting.
  • Auto Minify static files.
  • IPv6 Compatibility.

Resources Checklist

For social sharing:

• Site Metadata:
  • Title
  • Title template
  • Description
  • Author
  • Twitter Username
• Upload images on Cloudinary:
  • Logo, cover.
  • Share image.
  • Icons.
• Mock images (background, avatar, etc).

Comments

[David Woodward]

Why bring Netlify into this when you can just use firebase static hosting? You're already using firebase...

[ShinaBR2]

I choose Netlify because of it's powerful features, such as built in CI/CD and Slack integration without any line of code. With all of my technologies, I almost focus on Frontend, backend should don't take much effort.

[David Woodward]

I have a similar focus but I'm too lazy to setup netlify and I don't use any of those other CI/CD features because my projects are basically just hobby projects.

[ShinaBR2]

Haha my project is personal also. But because I'm lazy, I choose Netlify.
Everytime I push code into my develop branch, Netlify automatically build and deploy for you. That's the basic CI/CD I think we need for every project.

[David Woodward]

I disagree. My "CI/CD" is simply running:

yarn build
yarn deploy

Under the hood those map to firebase commands. But this is a thing about which reasonable people can disagree.

[ShinaBR2]

I see. Firebase CLI and GCP is also a good way for modern CI/CD. Everything has its own pros and cons. I have used both and depend on situation, I'll choose the right solution for.

[Petar Gitnik]

What do you use as a solution for the cookie consent?

[ShinaBR2]

The first problem that I have mentioned is about law and policy. Thanks, I think we should update a bit for this concern.
Thank you for your feedback.

[Nicolas-DW]

Thanks a lot! Really interesting!

[ShinaBR2]

Thanks :) I'm working on next stuffs and will update as soon as possible :)