Contents
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
Vue JS
Vuex
VueRouter
TypeScript with ES6
BEM Methodology
itCSS
Cypress
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
Clone the repository
Install dependencies
Running
Compiles and hot-reloads for development
Compiles and minifies for production
Run Cypress tests
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)
This software is licensed under MIT License, See License for more information ©Abdelrahman Elsayed.