If you want to take a look on all screens of the App, they are here
The idea of the Website is:
"A to-do list Next.js website focused on students and developers, offering better organization and customization options".
PS: The site is not just for students, but for any audience interested in a customizable to-do list. All code within this site can be reused in any to-do list project or other projects inside this context!
This project is part of my personal portfolio, so, I'll be happy if you could provide me any feedback about the project, code, structure or anything that you can report that could make me a better developer!
Email-me: [email protected]
Contact me at Twitter.
Also, you can use this Project as you wish, be for study, be for make improvements or earn money with it!
It's free!
1 - There are still several functions to be made available in the following versions of the application, buttons like the notifications button were placed only for UI matters.
2 - The only option that works at profile dropdown menu it’s Sign Out button, all the others are just for UI matters too.
If you want to test this Website in the Production mode, the website links are listed below:
Test Deployments: Soon!
-
Create custom solutions to organize your tasks into specific groups to have a website based on you
-
Get Statistics weekly from your collections
-
Get data you allow outside the site through the api
-
Search tasks, subtasks and collections from anywhere on the site
-
Collections
- Create, Edit and Remove your Collections
- Instant sync with other devices
- Customizable colors, icons and sizes
-
Tasks
- Create tasks inside a collection
- Notificates when the task is about to expire
- Edit task
- Create a subtask for a better organization
-
Edit Pages
- Customize colors, names and time for any task, subtasks or collection
-
Search
-
Search for collections, tasks e subtasks by name
-
Get information about a certain collection, showing it's task and subtasks and time to expire
-
-
Navbar
- Notifications button
- Add button
- Search button
- Profile dropdown menu
-
Settings
- Sign Out and Account settings
To run this project in the development mode, you'll need to have a basic environment to run a Next.js App, that can be found here.
Cloning the Repository
$ git clone https://github.com/JoaoGabriel-Lima/notemock_website/
$ cd notemock_website
Installing dependencies
$ yarn
or
$ npm install
1 - This site uses Next.js serverless functions to make connections to the database and Google Cloud Platform along with Next Auth for Login
2 - After cloning the repository, go to the /.env.development file and edit the MONGO_DB, MONGODB_URI, GOOGLE_ID, GOOGLE_SECRET, JWT_SECRET and NEXT_PUBLIC_DBTOKEN according to your own information.
With all dependencies installed and the environment properly configured, you can now run the website:
yarn
$ yarn run dev
npm
$ npm run dev
The website will start on the default port 3000
- React - A JavaScript library for building user interfaces
- Next.js - The React Framework
for Production - Next Auth - Authentication for Next.js
- Next PWA - Zero Config PWA Plugin for Next.js
- Axios - HTTP Client
- ESlint - Linter
- Dotenv - Configs from .env file
- MongoDB - Distributed Database
- Prettier - Code Formatter
- Babel - JavaScript Compiler
- Framer-Motion -Motion Library
- Styled-Components - Styles
- BoxIcons - Icons Library
- TailwindCSS - CSS framework
- React-Query - Data synchronization
- React-Datepicker - Datepicker
- React-Circular-Progressbar - Circular Progressbar
- Next-Sass - Sass Integration on Next.js
- Headlessui - UI components
- Mongoose - MongoDB validation
- Vercel - Host Service
You can send me as many PR's as you want, I would be glad to analyse and accept them! And if you have any question about the project...
Email-me: [email protected]
Contact me at Twitter.
Thank you!
This project is licensed under the MIT License - see the LICENSE.md file for details