Client

Table of content

• Introduction
• Directories
  • assets
    • icons
    • imgs
    • Other
  • components
  • data
  • fonts
  • hooks
  • layout
  • pages
  • python
  • style
  • utils
• How to test ?

Introduction

• The front-end is written in TypeScript.
  
• The framework used is Solid.JS.
  
• The meta language used to style the page is Sass.
  
• The application is bundled with Webpack.
  
• The environment of the application is Vite.
  

Directories

assets

The directory in which there are the assets of WeekGolf

icons

Files ending in .svg

imgs

Files ending in .jpe?g, .png, .webp

Other

All the other files are some files that are also images but that are specific images

components

In this directory there are files in .tsx that represents a component.
A component is a piece of code that does a specific task.
For example a Toggle switch On/Off can be a component.

data

In this directory, the majority of the files are in .json.
This directory is mainly used to store data that will be reused later by components.

fonts

In this directory, there are all the fonts (files ending in .ttf) used by WeekGolf.

hooks

In this directory there are files in .tsx? that represents a hook.
A hook is a tool used in website design to allow the webpage to be interactive and dynamic.
It enables certain parts of the webpage to be identified and manipulated, which can change how the page looks or behaves.
It works like a hook in fishing, where a fisherman catches fish by using a hook.
Similarly, a hook "catches" certain parts of a webpage and allows them to be changed.

layout

In this directory there are files in .tsx that represents a layout-component.
layout-components are defined as a component that is used for the layout, like a navbar, a header or a footer for example.

pages

In this directory there are files in .tsx that represents a page in WeekGolf.

python

In this directory there are files in .py that are some short python scripts.
It's useful for creating separate small scripts that are still related to the project

style

In this directory there are files in .scss that are just stylesheets written in sass.

utils

In this directory there are files in .tsx? that are useful functions that are going to be used in components.

How to test ?

Here is the list of commands that you can do on a Unix system to test the code on local:

git clone https://github.com/aderepas/WeekGolf
cd WeekGolf/Client
npm i
npm start