InstaLog - A fully responsive Login Page using VueJS

InstaLog – Instabug FrontEnd Intership Challenge

About

InstaLog is a fully responsive Login Page using VueJS

What I Care about while Implementing the App ?

One simple rule: “Design and code with performance in mind”

  • Full Responsive (Zoom up to 500% or Different screens)
  • typed In Typescript
  • High Performance
  • 1- Lazy Loading for vue router
  • 2- Lossy Images and SVGs images
  • 3- Dynamic Imports
  • 4- Debouncing for inputchange to get more performance
  • pixel perfect as Desgin sent
  • iTcss structure and BEM methodology
  • Composition API
  • Modular
  • Readable vaiables
  • Reusable Components
  • Navigation Guards for vue router
  • Conventional Commits

Technologies and tools App build with

Getting Started

This is an list of needed instructions to set up your project locally, to get a local copy up and running follow these instructuins.

Installation

  1. Clone the repository
$ git clone 
  1. Install dependencies
$ npm install

Running

  1. Compiles and hot-reloads for development
$ npm run serve
  1. Compiles and minifies for production
$ npm run build
  1. Run Cypress tests
npm run test:e2e

File Structure

InstaLog
├── LICENSE
├── package-lock.json
├── package.json
├── src
│   ├── assets
|   |   ├── fonts
|   |   └── imgs
│   ├── components
|   |   ├── Global
|   |   |   └── FormTextField
|   |   ├── LoginComponents
|   |   |   ├── LoginHeader
|   |   |   ├── LoginBody
|   |   |   ├── LoginFooter
|   |   |   ├── LoginForm
|   |   |   └── LoginSection
|   |   └── SliderComponents
|   |   |   ├── SlideItem
|   |   |   └── SliderSection
│   ├── router
|   |   └── index.ts
│   ├── scss
|   |   └── iTCSS Structure
│   ├── store
|   |   ├── UserAuth Module
|   |   ├── index.ts
|   |   └── state.ts
│   ├── views
|   |   ├── LoginView
|   |   ├── NotFoundView
|   |   └── WelcomeView
│   ├── main.ts
│   ├── shims-vue.d.ts
│   └── App.vue
├── tests
│   ├── unit
│   └── e2e
├── public
│   ├── favicon.ico	
│   └── index.html	
└── README.md

Screenshots

OverView With User Experience


Responsive Test [MultiScreen test]


Responsive Test [Zoom test]


e2e Testing


Light House Performance Audit (After implementation on Real Server)



License

This software is licensed under MIT License, See License for more information ©Abdelrahman Elsayed.

GitHub

View Github