Gama Bank - Accenture Academy 2.0

Summary

Gama Bank Project
Layout
Publication
Business Objectives
Installation
Frontend built With
Project requirements
Architecture Atomic Design
Work Strategy
Thanks
Credits
Contact Linkedin
Mobile Project

Gama Bank Project

This is a frontend project, developed in the selection process of Accenture February / 2021. It was four weeks of intense studies in Frontend web and mobile with React and React Native, but the learning went far beyond the technical. The dedication of Professor Douglas and the partnership of the participants brought an exchange of rich experiences that resulted in many learnings and cooperation in teamwork. We thank GamaAcademy and Accenture for this opportunity and the result provided ...

Let's go!!! Check out the project in full.

Layout

Figma - Online prototyping tool

Layout and API credit

Gama Academy

Publication

The project was published on the Netlify platform:

Netlify

Business Objectives

Installation

To run this project on your computer, you need to install NodeJS:

NodeJS

To install the necessary dependencies, issue the command:

npm install

And to run the application: npm start

The application will run on the local server on standard port 3000:

Runs the app in the development mode.
Open http://localhost:3000to view it in the browser.

Frontend built with

React - A JavaScript library for building user interfaces
Redux - A Predictable State Container for JS Apps
TypeScript - TypeScript is an open-source language which builds on JavaScript
Styled-components - Visual primitives for the component age
Unform - Unform is a performance-focused API for creating powerful forms experiences for both React and React Native
React Testing Library - React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components
Yup - Yup is a simple object schema validator I came across recently. It is inspired by Joi, but smaller than that, so it is probably a better fit to the client side

Project requirements

(Routes)

"/" Returns home { Gama Bank is a project of our students }
"/login" Returns the user access page to the client account dashboard
"//forgot-passwordnome/[NOME]" Returns a password page

(Private route)
"dashboard/[ID]" Returns the access page to the dashboard

Architecture Atomic Design

\--📂 GAMA-BANK
			\--📂 .vscode
			    | settings.json			 
			\--📂 public
			    | _redirects
			    | favicon.png
			    | index.html
			    | robots.txt
			\--📂src
			    |
			    📂---assets
			        |    toastContext.tsx
			    📂---routes
			    📂---services
			        |    api.ts
			        |    auth.ts
			    📂---store
				    📂---modules
					    📂---accounts
					    📂---actions						
        			        |    index.ts
			    📂---utils
			        |   getValidationErrors.ts
			    📂---views
				    📂---components
					    📂---ButtonGeneric
                			        |    index.tsx
                			        |    styles.tsx
					    📂---Header
                			        |    index.tsx
                			        |    styles.tsx
					    📂---InputPrimary
                			        |    index.tsx
                			        |    styles.tsx
					    📂---SummaryCards
                			        |    index.tsx
                			        |    styles.tsx
					    📂---ToastContainer
    					    📂---Toast
                			        |    index.tsx
                			        |    styles.tsx
						📂---Tooltip
                                		        |   index.tsx
                                		        |   styles.tsx
					    📂---WhiteCardDashboard
                                		        |   index.tsx
                                		        |   styles.tsx
					    📂---WhiteCardLoginRegister
                                		        |   index.tsx
                                		        |   styles.tsx
				    📂---pages
					    📂---CardError
                        		        |   index.tsx
                        		        |   styles.tsx
					    📂---Dashboard
            					    📂---Deposit
                                		        |   index.tsx
                                		        |   styles.tsx
            					    📂---Sidenav
                                		        |   index.tsx
                                		        |   styles.tsx
            					    📂---Transfer
                                		        |   index.tsx
                                		        |   styles.tsx
					    📂---Landing
            					    📂---SectionA
                                		        📂---CreateAccountForm
                                            		        |   styles.tsx
            					    📂---SectionB
                                		        |   index.tsx
                                		        |   styles.tsx
            					    📂---SectionC
                                		        |   index.tsx
                                		        |   styles.tsx
            					    📂---SectionD
                                		        |   index.tsx
                                		        |   styles.tsx
            					    📂---SectionE
                                		        |   index.tsx
                                		        |   styles.tsx
					    📂---Login
                                		        |   index.tsx
                                		        |   styles.tsx
					    📂---PasswordPage
                                		        |   index.tsx
                                		        |   styles.tsx							
		        |   App.txs
		        |   index.tsx
		        |   react-app-env.d.ts								
	|   .gitignore
	|   package.json
	|   README.md
	|   tsconfig.json
	|   yarn.lock

Work Strategy

Thanks

Teacher - Douglas Morais
Mentor - Renato Alencar
Yellow Belt - Camila Cardoso
To all partners participating in the Accenture Academy 2.0 ReactJS / React Native - class 2021