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).