About The Project

Keepit is a CRUD application designed for language learners who want to improve their vocabulary. With Keepit, users can save words along with their translations to their mother language, making it easy to review and remember new vocabulary. The application also includes a flashcards page where users can test their memory and retention of the words they've saved.

Keepit has been my go-to project for testing out different technologies. I have already implemented it using tech stacks such as:

1. CRA + Laravel + Fauna
2. Laravel + blade templates
3. Next.js
4. Remix.run

This time I wanted to try Vite, Netlify Functions, Prisma ORM and PlanetScale to build and maintain the application.

Built With

Edit: PlanetScale made the decision to remove the Hobby Tier (more info here), and I decided to migrate my data to SQLite (branch -> sqlite).

Getting Started

Prerequisites

1. yarn: npm install yarn -g
2. Netlify CLI: npm install netlify-cli -g

Installation

1. Clone the repo: git clone https://github.com/athanasu/keepit-vite.git

2. Move into the folder: cd ./keepit-vite

3. Install packages: yarn

4. Create the .env file: cp .env-example .env

5. Create a PlanetScale account and create the Keepit_Translation table:

   CREATE TABLE `Keepit_Translation` (
   	`id` int NOT NULL AUTO_INCREMENT,
   	`createdAt` datetime(3) NOT NULL DEFAULT current_timestamp(3),
   	`updatedAt` datetime(3) NOT NULL,
   	`from` varchar(255) NOT NULL,
   	`to` varchar(255) NOT NULL,
   	`notes` varchar(255) NOT NULL,
   	PRIMARY KEY (`id`)
   ) ENGINE InnoDB,
   CHARSET utf8mb4,
   COLLATE utf8mb4_unicode_ci;
   

6. Update the .env file with the DATABASE_URL credentials NODE_ENV of your preference or set the VITE_RUN_MSW to true to run the mock server.

7. Run the app: netlify dev

Usage

You can run the application in 2 modes by setting the VITE_RUN_MSW value in the .env file:

1. VITE_RUN_MSW={any}: Run the local server which connects to the DATABASE_URL you specified
2. VITE_RUN_MSW="true": Run the mock server. Even if you haven't completed the PlanetScale setup, the msw mode will run the application with mocked data

Build and Deploy

I used Netlify CLI to build and deploy the example app. Steps I followed:

1. ntl sites:list
2. ntl link
3. ntl env:set VITE_RUN_MSW "true"
4. ntl deploy --prod

Demo

An example of the application in msw mode can be found here.

Roadmap

• Supabase integration for authentication

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

LinkedIn: Giorgos Athanasoulias
Website: https://athanasu.com

back to top