igorssc / economix

EconomiX is an application designed to record and measure your earnings and expenses.

EconomiX is an application designed to record and measure your earnings and expenses.

• Technologies
• How to run
• Hygraph
• Environment variables
• Preview
• License

✨ Technologies

This project was developed with the following technologies:

• TypeScript
• React
• Next.js
• Next-pwa
• Next-auth
• GraphQl
• Apollo Client
• Tailwind
• Recharts

🚀 How to run

• 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 dev

You 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

🎲 Hygraph

To configure the content storage service, you must follow a few steps:

1. Go to the website https://hygraph.com and create a new project;

2. Create a schema model, named "Record", as in the image below:

3. In the project settings, copy your Master Environment Url:

It will be used in the environment variables

4. Create an Permanent Access Token:

5. Change the permissions of your permanent access token, and leave it as below:

🔐 Environment variables

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.

🪄 Preview

Access https://economix.vercel.app

📝 License

This project is under MIT licence. See the archive LICENSE to more details.

---

Made with 💜 by IGS Design - Igor Santos 👋