jaymjax1 / pokedex

Gotta catch em all!

Coding Style Overview

Directory Structure

I like to have my directory structure broken out by files type. See below for the breakout and descriptions:

Components:
This directory contains any reusable components to be used inside of pages.
Some React projects have two types of components: composed and complex.
Typically, my components directory consist of composed components,
and anything simpler are components usually from Bootcamp or Material UI.
Any components that get's reused over and over again as the project grows will be moved
into a homegrown external library

Constants:
Any and all static text is contained inside of the constants directory

Contexts:
All state data that is applicable to all components is store inside of this directory.
Typically, I try to avoid so much usage of context unless necessary.
A good use of context would be switching between light/dark themes.

Hooks:
Any hooks outside of the react library are stored here

Pages:
Pages are simply the screens inside of your application.
It consists of data, composed, and simple components which
makes up the entirety of the frontend experience

Services:
All functionality related to fetching/mutatingdata from an external data store
is kept in this directory. I like to further break it down by domain,
and inside each domain are files for queries, mutations,
fetch/axios calls, and a top level index file.

Styles:
All top level styles are stored in this directory.
Anything component specific or small will either be inline css or included
in the components folder. I try to keep styles as simple as possible by leveraging
existing ui frameworks such as Material-UI or Bootstrap,
and in some cases, a home grown UI library.

Tests:
This ones self-explanatory! All tests,whether they are snapshot or unit test should
go in this directory.

Types:
All Typescript interfaces and types belong in this directory.
It is a recent pivot of mine to store types at a higher level outside of the components,
but I'm liking it so far!

Utils:
Any specialty functionality unrelated to rendering a component,
and not directly hitting an api is stored here.