Eventio

📖 Table of Contents

Table of Contents

1. ➤ Overview
2. ➤ Getting Started
3. ➤ Publish
4. ➤ Project Files Description
5. ➤ Technologies Used

☁️ Overview

Eventio is a project that helps you organize and visualize your events.

📖 Getting Started

Clone the repository

Before Start

Create the .env file and fill in the necessary variables like env-example

You are able to start the project by typing the following commands in the command line:

Install all dependency of the project:

$ npm install || yarn install

Start the project:

$ npm start || yarn start

📖 Publish

You are able to publish the project by typing the following commands in the command line:

Generate a build

$ npm run build || yarn build

Install firebase-tools

$ npm i -g firebase-tools

Login

$ firebase login

Deploy

$ firebase deploy

💾 Project Files and Folder Description

Folders

• assets - Store static files with images and fonts.
• components - Contains components that are reused throughout the application.
• config - Configuration files like redux configuration and saga.
• enviroment - Folder where the environment variables are worked.
• hooks - Contains hooks that are reused throughout the application.
• models - Contains models that are reused throughout the application.
• pages - Contains the containers and their components.
• services - Contains the direct communication layer with the api as endpoints and or other services.
• styles - Contains the theme and other files related a styles.
• utils - Contains a file with functions and variables that will be useful in the application.
• Store - is the place where the application's functional rule is executed and the information is stored.

Files

• actions.ts - file where the actions that are triggered to change storage or trigger asynchronous functions are located.
• reducer.ts - Data that will be stored to populate that container's components.
• saga.ts - Location where asynchronous functions to the API are performed.
• {ComponentName}.tsx - React Component.
• {ComponentName}Style.tsx - Most basic and stylized react components.

💾 Technologies used Description

Techs

• React - React it's used to create the layout page and allow us to have reusable componets .
• Redux-Saga -Redux-saga is a tool that helps with asyncronous calls and works very well with redux in the part of loading information into the api and saving in redux. It also facilitates the organization of functions by facilitating unit testing.
• Redux -Redux helps in managing data between components and has a flow of state change and performance in relation to the necessary renderings.
• Styled-Components - Styled-components helps in the Stylization of components using javascript making them very readable and breaking this barrier between JS and CSS.
• Typescript - Typescript helps us to keep the application solid and readble based on typing, make the development more productive.