Ironhack Final Project

View Netlify deployed demo · View the presentation · Browse the project code

TrackLab To-do app

Ironhack Frontend final assignment project. The objective is to build and deploy a To-do app with Vue.js that allows users to create an account, record tasks, edit them and mark them as complete. The app is linked to a database, where all the user and task data is stored.

The database used for this project is Supabase. We also used Vite as a build tool to compile our code and provide a development server while we work.

Project setup

npm install

Environment variables

Set Up your Environment Variables from Supabase, either in an .env local file, or by means of Build environment variables:

VITE_SUPABASE_URL=<SUPABASE PROJECT URL>
VITE_SUPABASE_ANON_KEY=<SUPABASE PROJECT API KEY>

Supabase

In addition to having a Project URL and a Project API Key, to configure Supabase, you need to run the following scripts:

For the tasks table:

CREATE TYPE task_state AS ENUM ('pending', 'in-progress', 'completed');
CREATE TYPE task_priorities AS ENUM ('Low', 'Medium', 'High');
CREATE TYPE task_categories AS ENUM ('Marketing', 'Coding', 'Design', 'Sales', 'Management');
create table tasks (
  -- This first part sets up the tables
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  title text check (char_length(title) > 3),
  description text,
  current_state task_state default 'pending',
  priority task_priorities default 'Low',
  category task_categories,
  pos float8 not null,
  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);
alter table tasks enable row level security;
-- Then it creates a policy that lets authenticated users create task
create policy "Individuals can create a task." on tasks for
insert with check (auth.uid() = user_id);

-- Then it creates a policy that users can only view their own task (select task based on user id)
create policy "Individuals can view their own task. " on tasks for
select using (auth.uid() = user_id);
-- Then it does the same only for update
create policy "Individuals can update their own task." on tasks for
update using (auth.uid() = user_id);
-- And again for delete
create policy "Individuals can delete their own task." on tasks for
delete using (auth.uid() = user_id);

And for the profiles table:

-- Create a table for public "profiles"
create table profiles (
  id uuid references auth.users not null,
  updated_at timestamp with time zone,
  username text unique,
  avatar_url text,
  website text,

  primary key (id),
  unique(username),
  constraint username_length check (char_length(username) >= 3)
);

alter table profiles enable row level security;

create policy "Public profiles are viewable by everyone."
  on profiles for select
  using ( true );

create policy "Users can insert their own profile."
  on profiles for insert
  with check ( auth.uid() = id );

create policy "Users can update own profile."
  on profiles for update
  using ( auth.uid() = id );

-- Set up Realtime!
begin;
  drop publication if exists supabase_realtime;
  create publication supabase_realtime;
commit;
alter publication supabase_realtime add table profiles;

-- Set up Storage!
insert into storage.buckets (id, name)
values ('avatars', 'avatars');

create policy "Avatar images are publicly accessible."
  on storage.objects for select
  using ( bucket_id = 'avatars' );

create policy "Anyone can upload an avatar."
  on storage.objects for insert
  with check ( bucket_id = 'avatars' );

For the avatars bucket, in Storage:

• Make the avatars bucket public.

  

• In the Configuration Policies, be sure you have these defined:

  • DELETE: Anyone can delete an avatar.
  • UPDATE: Anyone can update an avatar.
  • INSERT: Anyone can upload an avatar.
  • SELECT: Avatar images are publicly accessible.

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

About the project

Develop a Trello-like SPA running on Vue 3 with Composition API, Pinia as state management library, Vue Router, Vite, and finally Supabase running on the backend side.

The design specifications of the project can be found in Figma.

Here are also the user stories required for this project, following Gherkin keywords.

Netlify Live version Status:

Authors

	Name	GitHub
	Alba	@acalleja94
	Raul	@RaulFR01
	JA Reyes	@jarDotNet

Technical specifications

• Cilent: Vue.js, Vite (dev server)
• Router: Vue Router
• Store: Pinia and Pinia Persist for persistent login and other shared stuff
• Database as a service: Supabase
• Drag and Drop: vue3-smooth-dnd library (Vue 3 Wrapper of smooth-dnd library)
• UI libraries: Bootstrap, Fort Awesome, Heroicons, Iconoir, ress

Features

This project includes the following functionalities and features:

• Responsive web dessign, including hamburger menu
• Authentication flow (including Sign In, Sign Up and Sign Out)
• Database as a Service (for Authentication, Users, Tasks, and user Profiles)
• Ability to create, edit, delete or mark tasks as complete/incomplete
• Drag and Drop of tasks on the Kanban board
• A store and a database that the app calls to request or update data
• SPA using Vue components and Page routing
• CSS animations (for the Avatar button, and the name of the app in the header of the Home page)
• 404 Not Found error page
• Form validation
• Favicon

Built With

• 
• 
• 
• 
• 
• 
• 
• 
•