This is the new front-end developed by SOF19 for SOF, written in React. The page is heavily influenced by Material Design with focus on animations to both give clear intentions of the webpage, as well as giving it some visual flair.
- React
- Redux - State management used in conjunction with react to keep track of the state and information in the application
- Redux Thunk - Redux middleware to handle asynchronous requests
- Redux Token Auth - Used for handling login with tokens
- RMWC - Material Design React components
- SASS - More programmer friendly CSS.
- Pose - Fluid and easy to create animations.
- React-intl - Language localization.
- /actions contains all Redux actions that are used in the application
- /reducers contains all Redux reducers that are used in the application
- /api contains the functions that calls the back-end API.
- /pages contains the different pageTypes and pagelayouts with their respective page texts
- /components contains all smaller react components that are used within the different pages.
- /locale contains all text strings for the web-page in English and Swedish.
- /stylesheets contains all SASS stylesheets
The way purchases and payments work in the application is as follows (more about the API calls):
- A user adds things to their cart from the store page.
- When a user presses the checkout button, the cart is pushed to the backend and they are redirected to the checkout page. This page, and the Card form uses stripes React components to handle payments.
- When the payment information has been inputted, a request is sent to stripes API, which return a payment token.
- The token is sent to the backend, which charges the card and adds the purchased items to the users account.