EconomiX is an application designed to record and measure your earnings and expenses.
This project was developed with the following technologies:
- TypeScript
- React
- Next.js
- Next-pwa
- Next-auth
- GraphQl
- Apollo Client
- Tailwind
- Recharts
- Clone the repository
git clone https://github.com/igorssc/economix.git
cd economix- Install dependencies
yarn
# or
npm init-
Put your environment variables in a file .env.local at the root of the project
-
Start the server
yarn dev
# or
npm run devYou can now access localhost:3000 from your browser. An application layout template:
This project utilizes the power of Recharts, a robust charting library for React, to create visually appealing and interactive charts. Recharts offers a wide range of chart types, including line charts, bar charts, pie charts, and more.
In this project, Recharts was employed to provide insightful visualizations for the recorded earnings and expenses. It offers a seamless integration with React components, making it convenient to render data-driven charts with minimal configuration.
To learn more about how to use Recharts and explore its extensive features, you can refer to the official documentation: Recharts Documentation
To configure the content storage service, you must follow a few steps:
-
Go to the website https://hygraph.com and create a new project;
-
Create a schema model, named "Record", as in the image below:
- In the project settings, copy your Master Environment Url:
It will be used in the environment variables
- Create an Permanent Access Token:
- Change the permissions of your permanent access token, and leave it as below:
In this project, environment variables are used, to connect with the content storage service hygraph.
For the correct operation of the system, the following environment variables must be used:
GOOGLE_CLIENT_ID=id-of-your-google-application
GOOGLE_CLIENT_SECRET=your-google-secret-token
FACEBOOK_CLIENT_ID=id-of-your-google-application
FACEBOOK_CLIENT_SECRET=your-facebook-secret-token
NEXT_PUBLIC_HYGRAPH_URI=your-hygraph-master-environment-url
NEXT_PUBLIC_HYGRAPH_CLIENT_SECRET=your-hygraph-secret-token
NEXTAUTH_SECRET=secret-token-for-your-application-in-production
Make sure to replace GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, FACEBOOK_CLIENT_ID, FACEBOOK_CLIENT_SECRET, and other relevant fields with your own Google and Facebook configuration information, along with other necessary environment variables.
NextAuth is a flexible authentication library for Next.js applications that supports various authentication providers, including Google and Facebook. To implement the Google and Facebook login, you need to provide the corresponding client IDs and secret tokens in the environment variables.
Please refer to the NextAuth documentation for more detailed instructions on setting up NextAuth with Google and Facebook authentication providers.
Access https://economix.vercel.app
This project is under MIT licence. See the archive LICENSE to more details.
Made with 💜 by IGS Design - Igor Santos 👋