TACL-LYF Website

Installation

Everything is already set-up in the package.json so all you have to do is

yarn install

Follow the yarn installation docs if you need to install yarn!

Gatsby

You will have to install gatsby-cli which you can do with npm install -g gatsby-cli Their website has a nice tutorial which I recommend following.

You also can find the original Gatsby's original README.md here. That doc details a quick look at some file structure and basic files for this repo

🚀 Quick start

1. Start developing.

   Navigate into the site’s directory and start it up.

   gatsby develop

2. Open the code and start customizing!

   Your site is now running at http://localhost:8000!

   Edit src/pages/index.tsx to see your site update in real-time!

3. Learn more about Gatsby

   • Documentation

   • Tutorials

   • Guides

   • API Reference

   • Plugin Library

   • Cheat Sheet

Libraries Used

• react-spring for animations
• MUI components for base UI components

File Structure

Root Level Files

• gatsby-config.ts: This file contains all the configuration for the Gatsby site including what plugins we use and site metadata.
• gatsby-browser.tsx: Contains the APIs we call when events happen client-side on the browser
• gatsby-ssr.tsx: Contains the APIs we call when events happen server-side during compilation
• gatsby-node.tsx: Contains the APIs that plugins and we can use to build pages and do other cool things

Directories

• /pages/: All of the hard-coded pages for the site. Gatsby takes each of these files and converts them to a page with the path https://sitename.com/[filename]
• /components: All of the components that make up the site! Each folder represents related components such as the Header folder which contains the sub components that make up the Header. Generally if a component is re-ususable it'll have its own subfoler under components
• /hooks: Hooks are a React-specific concept that enable functionality such as state and many other things