-
Notifications
You must be signed in to change notification settings - Fork 22
Home
This is the humble beginnings of what will hopefully become a very helpful place to find more information about how the app is constructed in order to allow contributions to be made in line with the style and philosophy set in place by the core team.
1. React Hooks
We are choosing to use React Hooks in place of traditional Class-based React. Hooks provide great functionality and the option to mainly use functional components. Please feel free to reach out if you're not familiar with this approach and we will be happy to help!
2. Styles:
We are using Styled Components for most of our styling. There are some basic styles in place for font-family and normalization across browsers.
Base styles
root > client > components > shared > styles.js
In the project there is a file full of shared Styled Components that are the lower level building blocks of the app. Here you can find already in place elements to use such as buttons, headers, text, and other low level items. Please be sure to check for something here before creating a new component.
Base Components
root > client > components > shared
Here you can find fairly universal components built of the shared styles. We hope to grow this selection and add more documentation here on what props they take and their general use.
Flexbox
We are preferring the use of CSS Flexbox in most layout scenarios. CSS Grid might be used in cases where tile-style alignment may be necessary and it would shine as the better choice, but in most instances please use Flexbox as your means to layout your elements.
3. API Routes:
root > client > api-routes.js
In this file you can find all API routes currently available. Any API route used should reference the object exported from this file and not expressly declare the route.
Example:
import apiRoutes from "../api-routes";
...
const { data, error } = useSWR(apiRoutes.getAllQuizzes, fetcher);