Lizard

👋 Say goodbye to "coding" style just CNTRL + C / CNTRL + V 👋
OR
https://res.cloudinary.com/lizardd/raw/upload/v1655465329/cdn-lizard_oanjla.js

🎥Video resume : https://youtu.be/vqMS9xy2kSA

Manual user: https://github.com/jorgeMunozCampanillas/Lizard/files/8928141/Jorge.Munoz.Lizard.User.Guide.pdf)

## About Lizard

Lizard is a page to upload components and views of the TailwindCSS framework, on this page users can upload their views and components to share them with other users of the website and in the same way copy the code of others to speed up the task of creating different components with styles.

# Stack #

Front	Back	miscellany

# Front # 🖥

• Implementation of Vue.js for the creation of the SPA and reactivity of the page

• Vuex for communication between components

• Mirrorcode/html2canvas for the code editing part

• Sass as CSS preprocessor

# Back # 👨‍💻

- Laravel 8 as the main main framework for the back-end

• mariaDB as database manager

Tables

# User	# Follw	# Post	# Favoritos	# Like
idUsu	idUsuFollower	idPost	idUsu	idUsu
Mail	idUsuFollw	id_Usu	idPost	idUsu
Name	Date	Codigo	Code
Permiss		Date	idUsu

Model E/R

A user can be of 3 types: Unregistered, Registered, Administrator.

<> Unregistered user, you can:

- See the posts that are on the page, you do not have permission for anything else.

<> Registered user, you can:

- Make a crud of your post.
- Like other posts.
- Add a post to favorites to see it later.
- Make comments on the post.
- Follow other registered users.

<> Admin user, you can:

- Manage everything from other users.

# Deploy # ☁

The deployment will be done in an AWS EC2 instance with the Ngix server, this instance will only have whatever the page code is, the database will be hosted on a different server.

I will try to make the domain .com or .es but if it is not possible I will opt for a free one

Getting Started

Prerequisites

You need to have installed npm and composer

• npm

  npm install npm@latest -g

• xampp (or other stack like it with apache, mariaDB and php)

Xampp Download Page

• Composer

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
  php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
  php composer-setup.php
  php -r "unlink('composer-setup.php');"

or

Composer Download Page

Installation 🚀

1. Clone the repo

     Git clone https://github.com/jorgeMunozCampanillas/Lizard

2. Install NPM packages

     npm install
   

3. Run NPM packages

       npm run dev
   

4. Launch server

       php artisan serve
   

5. Create new data base called: lizard

6. Run migrations and seeders

       php artisan migrate:refresh --seed
   

Roadmap 🏁

• Login/Register

• SPA

• Middleware Auth

• Multilanguage

• Dashboard

  • Users
  • Post

• Code

  • Code beautiful
  • Code Crud
  • Code Screenshot.

• Post

  • View
  • Filter
  • Likes

Week

Week 1:

• User login
• User register
• User middlewares
• User Dashboard
• Some views to try vue routes

Week 2:

• Show all posts
• Show one post
• Sanctum
• Try to implement Vuex

Week 3:

• Show post from one user
• Show profiles
• Likes
• Improve security for auths

Week 4:

• Follows
• Tags
• Preview
• Multilanguage

Week 5:

• Some styles
• Search bar
• cdn

Week 6:

• Dashboard
• New Home
• New profile

Helpful 🙏

• Started with codemirror: https://www.youtube.com/watch?v=oDitntruMLc
• Configure EventBus: https://stackoverflow.com/questions/61034661/vue-js-how-can-i-emit-events-between-router-view-components
• Vue Routes: https://codingpotions.com/vue-router
• Vue Middleware: https://laravelvuespa.com/middleware/middleware-overview/
• Vuex(3): https://v3.vuex.vuejs.org/guide/#the-simplest-store
• UploadImg: https://www.youtube.com/watch?v=2JteMJzNI44
• public/permiss for img: https://laravel.com/docs/8.x/filesystem
• Language Switcher: https://www.youtube.com/watch?v=CFGjn3yKMNc