Short Explanation
Canker Core is a NextJS based webapp designed for logging and tracking canker sores. Users create a personal account to track, treat, and manage their oral health in one easy place. The app features a simple and intuitive interface that allows users to log their canker sores, on a visual diagram of the mouth, and track the size, pain level, and location of sores over time.
Project Goals
I designed canker core to help better understand my own oral health and to provide a simple and easy-to-use tool for others to do the same.
Tech Stack Used
- NextJS: I chose NextJS for its speed and ease of use, as well as its support for server-side rendering and static site generation in order to make my site discoverable via SEO.
- TypeScript: I chose TypeScript for its type checking and ability to catch errors early, and to improve the overall maintainability of my code.
- TailwindCSS: I chose TailwindCSS for its utility-first approach to styling, as well as its support for responsive design and custom theming.
- Supabase: I chose Supabase for its ease of use and flexibility, as well as its support for real-time data synchronization and user authentication.
- Vercel: Vercel was a great fit thanks to its speed and reliability, and simple deployment process. As my site is relatively small, with low traffic, Vercel was an easy, cost effective solution.
Features
Below are some of the key features of the Canker Core project:
- User Authentication: users can create an account, log in, and log out of the app.
- Canker Sore Logging: users can log their canker sores on a visual diagram of the mouth.
- Canker Sore Tracking: users can track the size, pain level, and location of their canker sores over time.
- Health and Diet Daily Log users can log their daily health and diet to help them better understand habits and factors that may affect oral health.
- Data Visualization: users can view detailed statistics and charts to help them better understand their oral health.
- Responsive Design: the app is fully responsive and works well on all devices, from desktop to mobile.
- Dark Mode: the app features a dark mode option for users who prefer a darker color scheme.
Demo Video
Here is a short video demo of the Canker Core website and its features:
Future Plans
- Treatment Recommendations: add support for providing treatment recommendations based on the size, pain level, and location of canker sores.
- Blog and Community Forum: add a blog and community forum to the app to provide users with additional resources and support for managing their oral health.
- Online Store: add an online store to the app to allow users to purchase oral health products, remedies, and treatments directly from the app.
- Notes and Photos: allow users to add notes and photos to each canker sore entry to help them better track and manage their oral health.
- Treatment Tracking: allow users to track treatments and remedies used for each canker sore, and view the effectiveness of each treatment over time.
Conclusion
I am proud of the work I have done on the Canker Core project, and I am excited to continue working on it and adding new features and improvements in the future. I hope that the app will help others better understand and manage their oral health, and provide a valuable resource for those suffering from canker sores.