Todos Web app

About The Project

This is a simple project that I made to practice and learn about bulma.io (Open Source CSS Library), firebase and Vue 3. I wanted to make a simple web app that would show a todos list to help you make things done. I also wanted to make it responsive so that it would look good on mobile devices.

Also I wanted to make it as simple as possible so that I could learn more about the technologies I used.

Built With

• 🌲 Vuejs 3
• ⚡️ Vite
• 💪 Typescript
• 💻 VSCode
• 📦 Pnpm
• 🎨 Bulma
• 🚀 Firebase
• 📱 Responsive

Getting Started

To get a local copy up and running follow these simple steps.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• Git

sudo apt-get install git

• Pnpm

sudo npm install -g pnpm

• Vue CLI

sudo npm install -g @vue/cli

Installation

1. Clone the repo

git clone https://github.com/hectorromerodev/todo-fire-vue.git

2. Install Dependencies

# If you dont have pnpm installed
npm install -g pnpm

# If you already have pnpm installed
pnpm install

3. Run the project

pnpm run dev

4. Build the project

pnpm run build

Usage

💡 You can use this project to create your own todo app with other technologies, features or integrations.

For more examples, please refer to the Website Case Study from hr-webdev.com Twt: hectorromerodev

Contact

Hector Romero - @hectorromerodev

Project Link: Live Todo App

Acknowledgements

• To do icons created by Arkinasi - Flaticon

• Icons made by Pixel perfect from www.flaticon.com