Day 1: Vue project setup
Tags: 100daysofcode, vue, webdev, programming
Published: 2022-08-24 11:13:00

Hi everyone, in this article I'll talk about why I started #100daysofcode challenge for myself and what I've done in the first day of the challenge

## **Why?**
Actually there is more than just one reason. so I'll list them.

### Main Reason
To be honest I'm a lazy person and doing something consistently is hard for me, unless I make these things a must-do. What I mean by that is I'm not actually lazy, I just have to feel responsible to do things. For that reason I usually promise someone, or in this case start a blog. But coding every day is not really that hard for me because I enjoy coding. The real reason is I must study and it has never been a daily thing for me. So I told myself:

> _You won't code before you study_

This may sound stupid to some of you, but what I actually do is tricking my brain into loving studying. I can hear you asking _"But how?"_. It's actually quite simple, think coding is like gaming or spending time on social media, something that you can give yourself as a reward. And when brain gets reward it creates dopamine and basically you become happy. Brain remembers why it got that reward and the next time I study hopefully I become more motivated and focused. At least that's how I believe it works, I'm not an expert at this area. 

### Other Reasons
- Learning new skills and sharpening the existing ones
- Creating a daily coding habit
- Starting a blog and creating content about programming
- Being a part of open-source community
- Using my time for important things

## OK, but what is my goals?
In this journey I'm planning to achieve these **new skills**:
- Vue.js
- Nuxt.js
- Websockets (actually I worked with websockets but it was a long time ago)
- Supabase
- Authentication services
- CockroachDB

And the skills I'd like to get better at:
- Designing responsive websites
- Flutter
- Firebase
- React & Next.js
- UI Designing
- SQL & NoSQL databases
- Go

## What I did in Day 1? (Finally)

For starting, I thought I need to learn something new so I don't get bored from day 1. Then I found [this tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jveNu1TI0P62Dn9Me1j9tG), basically it's about creating a website using Vue 3, Vuex 4 and Firebase. But since I want to learn Supabase, I decided to change tech stack a little bit. So here is my tech stack:

- Supabase instead of Firebase
- Vue 3 and Vuex 4 is same obviously
- TailwindCSS instead of plain styles that tutor has created
- And Typescript instead of Javascript

After that decision I opened up VSCode and created app using vue cli. Then I setup TailwindCSS and create the folder structure. And finally I created the navbar below:
![frosted glass navbar css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0k9i8c470t58vod1k8x.png)

### Github Repository for this project
{% embed https://github.com/ibrahimhozhun/vuex-supabase %}

It was very fun to code it. Anyway then I created a basic login page, and unfortunately that's all for day 1. Because I also studied, made research about Vue tutorials and I played video games. So that was all I could in remaining time. I know it's not a great start but still it's a start and I suppose that's the important thing. Hopefully tomorrow I'll be more productive. 

Do you have any recommendations for me? I'd be glad to read them down in the comments, have a nice & productive day!