Skip to content

firstninja111/gda-front-end

Repository files navigation

GDA Frontend: Web

Starter using Vite + React + TypeScript + Tailwind with Firebase.

Stack

This stack uses following libraries:

  • Vite
  • React
    • React Router
  • TypeScript
  • Tailwind CSS
    • daisyUI
  • Firebase(v9, modular)
  • ESLint
  • Prettier

Set up

mv .env.local.example .env.local
yarn
yarn dev

Firebase

Vite

Vite is a fast frontend build tool. According to the README, it consists of two major parts:

  • A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

React

React is a JavaScript library for building user interfaces.

Due to its awesome renderer system, there are many React Renderor. So React can be not used only Web, for example, used by React Native.

Let's dive into React and Vite can use with React.

TypeScript

TypeScript is a superset of JavaScript. It is just one of NPM library, but it provides an original compiler.

When you use TypeScript with React, you can write JSX with TypeScript, called TSX. Then you can develop views written by Type-Safe template.

Tailwind CSS

Tailwind CSS is modern utility-first CSS framework. It provides many CSS rules, but these are purged when production builds. So developers do not worry about CSS asset size for performance optimization.

In VSCode, I recommend to use intellisense extension.

Frequently, React developers are worried about how to write CSS in TSX(JSX) template. You must choose from CSS Modules, styled-components, linaria, and so on. Additionally, CSS architecture is difficult about scoping, e.g. BEM, FLOCSS.

When you decide to use Tailwind, you only write utility-first CSS classes, you don't have to worry about them!

daisyUI

daisyUI is Tailwind CSS Components library.

It prepares components CSS classes such as 'btn'. If you provide 'btn' class to <button> element, then there should be placed completely designed button.

If you don't want to use it, just remove the package and remove config in tailwind.config.js.

Firebase

Firebase is a PaaS that makes us create hi-quality apps so easy and so fast.

The Firebase js SDK has become very useful in version 9, with optimizations that greatly reduce bundle size.

How to Use

Please look at firebase.ts.

There you will find a set of utility functions to manipulate Firebase for the environment in which the Emulator is used.

Formatter and Linter

Already set up ESLint and Prettier. You can customize the rules.

NOTICE: The template does not use eslint-plugin-prettier and prettier-eslint. So I recommend that running commands individually. e.g. prettier && eslint.

Please read: https://prettier.io/docs/en/integrating-with-linters.html.

ToDo

About

Psychologist course platform built by React, Tailwind, Vite, Stripe.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages