Magnifi Documentation

Feature Releases

Master Document: Knowledge Base

API Docs

Magnifi API Document

Folder for New Pages

Explore

Magnifi knowledge Base

Developer Guide

Introduction

This guide has been specifically designed for developers who are interested in creating a frontend for Magnifi. Whether you are a seasoned developer or just starting out, this guide provides a comprehensive overview of the steps you need to take to create an effective and efficient frontend for Magnifi. With the help of detailed instructions and examples, you will be able to follow along and create a frontend that perfectly suits your needs.

Purpose

The purpose of frontend documentation is to provide comprehensive information and guidance about the structure, behavior, and usage of the frontend components, modules, and features of a software application. It is a reference and resource for developers, designers, and other stakeholders involved in working with or maintaining the frontend codebase.

Scope

Architecture Overview: Describing the high-level architecture of the front end, including the overall structure, component hierarchy, and data flow.

Component Documentation: Detailing each individual frontend component, its purpose, props (inputs), state, and how it interacts with other components.

Styling Guidelines: Outline the styles and design patterns used in the front end, including guidelines for CSS, SCSS, or other styling languages employed.

API Documentation: Documenting any APIs or services used by the front end, such as RESTful APIs, GraphQL endpoints, or third-party libraries.

Usage Examples: Provide code examples and demonstrations of how to use different front-end features and components effectively.

Configuration and Setup: Offering instructions on how to set up the frontend development environment, including dependencies, build processes, and any required tools or libraries.

Testing Guidelines: Describing guidelines and best practices for testing frontend components, such as unit tests, integration tests, or end-to-end tests.

Accessibility Considerations: Including guidance on ensuring the front end adheres to accessibility standards and best practices, making the application usable by many users.

Troubleshooting and FAQs: Addressing common issues, providing troubleshooting steps, and answering frequently asked questions related to the front end.

Versioning and Change log: Documenting version history and changes made to the frontend codebase over time, including bug fixes, feature enhancements, and breaking changes.

Language Used:

React⁠

⁠

Using React as the frontend language allows developers to build dynamic and interactive user interfaces, leverage reusable components, and efficiently manage the application's state, resulting in a more efficient and maintainable development process.

Getting Started

The prerequisites and system requirements for running a front-end application are:

Web Browser: Modern and up-to-date web browsers installed, such as Google Chrome, Mozilla Firefox, Safari, or Microsoft Edge.

Operating System: Applications can typically run on various operating systems, including Windows, macOS, and Linux.

Node.js: You need to have Node.js installed on your system. The current version we are using is v14.21.

Package Manager: The project uses a package manager like npm (Node Package Manager) or Yarn to manage dependencies and build processes.

Version Control: We use Git for version control and repo management.

To set up the development environment for a project obtained from Git, follow these general steps:

Clone the Repository: Start by cloning the Git repository to your local machine. Open a terminal or command prompt and navigate to the directory where you want to store the project. Use the following command to clone the repository:

git clone <repo>

Install Dependencies: Once the repository is cloned, navigate into the project directory using the terminal or command prompt.

npm i or yarn install

Configure Environment Variables: Add a .env file in the root directory of the project.

Start the Development Server:

npm start

Project Structure

⁠

⁠

Provide an overview of the main directories and files.

Here is an overview of the main directories and files:

src/: This is the main source code directory where most of the application code resides.

index.js: The entry point of your application. It typically renders the root component and mounts it to the DOM.

app/App.js: The root component of the application. It serves as the container for other components and handles the overall structure and routing.

components/: This directory contains reusable UI components used throughout the application. Each component has its own folder with a .js file for the component code and potentially additional files like .css for component-specific styles.

views/: This directory holds individual page components that represent different routes or sections of the application. Each page component may use components from the components/ directory.

store/: This directory can contain service modules that handle API integrations, data fetching, or other external interactions.

utils/: This directory holds utility functions or helper modules that provide reusable functions or commonly used functionality across the application.

theme/: This directory contains global or shared CSS styles or style variables used across the application.

public/: This directory contains static assets that are served as-is by the web server.

index.html: The HTML template file that serves as the entry point for our application. It typically includes a <div> element with an ID where React app is mounted.

favicon.ico: The icon file that is displayed in the browser tab or bookmark for the application.

Other static assets like images, fonts, or other media files can also be placed in this directory.

node_modules/: This directory is created when we install project dependencies using a package manager like npm or Yarn. It contains all the installed packages and libraries required by your application.

package.json: The package.json file holds metadata about our project and lists the project dependencies and scripts. It also includes configuration settings for the project.

package-lock.json (or yarn.lock): This file is automatically generated when installing dependencies and provides a detailed, deterministic record of the installed packages and their versions.

.gitignore: This file specifies which files and directories should be ignored by version control (e.g., Git). It commonly includes entries for the node_modules/ directory and build output directories.

Architecture

Explain the overall architecture of the frontend application.

We are using a ‘Container-Based’ Architecture

In Container Based Architecture, components are divided into two main categories: presentational components and container components.

Presentational Components: Also known as dumb or stateless components, are responsible for rendering the UI and presenting data. They receive data and callbacks as props from their container components and focus solely on displaying the UI elements. Presentational components should not contain any business logic or manage application state.

Container Components: Also known as smart or stateful components, are responsible for managing application state, fetching data, and handling business logic. They encapsulate the presentational components and provide them with the necessary data and callbacks through props. Container components are typically connected to the application's state management system, such as Redux or React Context, and can dispatch actions, retrieve data, and update the state.

Components

List and describe the main components used in the frontend application.

Provide details about each component, including its purpose, functionality, and usage.

Include code snippets or examples, if applicable.

Styling

Explain the approach to styling the front-end application.

Describe the CSS framework or libraries used, if any.

Provide guidelines and best practices for styling and maintaining consistency.

Routing

React Router provides a declarative way to define routes and handle navigation within a React application. It enables the application to render different components based on the current URL or user interactions without performing a full page reload.

React Router provides a declarative way to define routes and handle navigation within the application. Wrap your application's root component with the Router component provided by React Router. The Router sets up the routing context for the entire application.

⁠

State Management

Describe the state management solution used in the front-end application.

React Context allows you to share state and pass data down the component tree without explicitly passing props at each level

Explain how the application's state is managed and shared between components.

Creating a Context: First, you create a new context using the createContext() function from the react package. This creates a Context object that holds the state and provides a way to access and update it.

⁠

Providing the Context: Wrap the component tree that needs access to the shared state with a Provider component.

⁠

Consuming the Context: Components that need access to the shared state can consume the Context using the useContext() hook from the react package. The useContext() hook takes the Context object as an argument and returns the current value of the Context.

⁠

API Integration

Ducks Pattern (Redux Ducks): Duck is a proposal for organizing Redux-related code in a more modular and self-contained manner. It suggests grouping actions, action types, and reducers together in a single module, known as a "Duck." The primary goal of Ducks is to simplify the structure of Redux code and make it easier to manage and understand.

In the Ducks pattern, related Redux logic is colocated in a single file, which typically includes the following:

Action Types: Define unique string constants that represent the action types.

⁠

Actions: Create action creators, functions that return action objects.

⁠

Reducer: Define the reducer function that handles state updates based on the dispatched actions.

⁠

By encapsulating related Redux code within a Duck module, it becomes easier to navigate and maintain the application's state management. It reduces the need to jump between multiple files when working on a specific feature or slice of the state.

Error Handling

In React, error handling is crucial to ensure that unexpected errors or exceptions in components do not break the entire application. React provides a built-in feature called Error Boundaries that allows you to catch and handle errors within a component and its subtree.

Here's an overview of how error handling with Error Boundaries works in Application:

Creating an Error Boundary: We have created a new component that extends the React. Component and implement the fallback method. This method is invoked when an error occurs in the component or any of its child components.

⁠

Wrapping Components with the Error Boundary: Wrap the components or component hierarchy that we want to be covered by error handling with the Error Boundary component. This can be done by simply rendering the components as children of the Error Boundary component.

⁠

Error Handling: On Error Occurance, a Pop-up window opens which asks the user to redirect to the main page or send the error report to the administrator.

⁠

Fallback-UI: If the user clicks on Send Report, A Mail, and Slack notification is triggered that informs the stakeholders that something went wrong in the application and necessary actions can be taken and the user is redirected back to the home page.

Testing

Describe the testing strategy and frameworks used for front-end testing.

Explain how to run tests and provide examples of writing test cases.

Include information about unit testing, integration testing, or end-to-end testing.

Deployment

Provide instructions for deploying the frontend application to various environments.

Explain the deployment process and any required configurations.

Include any additional information or considerations for deployment.

Troubleshooting

Provide a list of common issues or errors that may arise during development or deployment.

Include troubleshooting steps and solutions for each issue.

Resources

List any external resources, tutorials, or documentation that may be helpful for frontend development.

Provide links to relevant libraries, frameworks, or tools used in the project.

Changelog

Document the changes and updates made to the frontend application over time.

Include version numbers, release dates, and a brief description of each update.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.