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

Credits

Contact Linkedin

• Emanuel Moura - https://www.linkedin.com/in/emanmoura/
• Jequélia Santana - https://www.linkedin.com/in/jequelia-santana-680773173/
• Laís Lopes - https://www.linkedin.com/in/laismaas/
• Rafael Roma - https://www.linkedin.com/in/rafaelproma/
• Reinaldo Trindade - https://www.linkedin.com/in/reinaldo-trindade/