Git Product home page Git Product logo

cultos_takehome's Introduction

CULTOS TAKEHOME FRONTEND TEST

Tech Stack

  • Vue3 (+ Options)
  • Pinia (store mgmt)
  • ElementUI Plus
  • Tailwind CSS
  • Font Awesome Icons
  • Axios / Vue Axios
  • Moment / Lodash

Project Run

  1. BACKEND
  • cd frontend
  • npm install
  • npm run serve
  • localhost:1938
  1. FRONTEND
  • cd frontend
  • npm install
  • npm run dev
  • localhost:5173

Assignment

Task 1 + 2 (DESIGN)

  • create activity page
  • closely mimic screenshots
  • query list using post
  • display platform icons
  • add prefix description
  • add up totals for points
  • style the modal and table

Task 3 (MODAL)

  • add create activity button
  • on button click, modal should appear
  • form elements appearing on modal
  • add cancel/submit buttons
  • on cancel (or x), close modal
  • on submit, post data to api
  • modal should close, table updated
  • refresh page to see new created row

Task 4 (ACTIONS)

  • edit should populate data to edit row
  • confirm edit should update data locally
  • refresh page to see default state of data
  • delete should remove the row locally
  • refresh page to see deleted row again
  • calculate points on edit/delete actions

Bonus Objectives

  • confirm button on delete
  • add gradient to points earned
  • row color should change on hover
  • mobile view with date column hidden

Extra Features

  • create translations and constants file
  • implement error checking on empty form
  • validation rules added on modal inputs
  • snackbar to indicate status on updates
  • pagination for data with customization
  • show 'n/a' for points if no data exists
  • allow column sorting on date and points
  • modify column names for easy readability
  • indicate empty box when table not loaded
  • min/max caps placed on details and points
  • create mock data on backend for easy demo
  • scrollbar on table view to keep height same
  • repo has branching strategy and task readme
  • login status persisted through local storage
  • filtering activity based on platform or type
  • routing with error (404) and login/hello page
  • implement loading animation for display table
  • top header navigation added with logout button
  • can only access protected pages after logged in

Challenges Faced

  • Styling around the modal and table rows was a bit complex, had to access through specificity
  • Pagination was an interesting problem to deal with, due to having to emit size back to parent
  • Clearing modal inputs after editing row and then creating row had to be brute forced to empty
  • Showing an empty box when server not responding was difficult due to data not being populated
  • Componentizing everything has opposed to single view in app file took a lot of time and effort
  • Deleting the very last row would cause a data error, needed to make sure table length was reset

Unresolved Issues

  • Unable to click on row to edit due to an existing problem with setCurrent and clearSelection
  • Filtering activity based on Platform AND Type is not possible as filter only accepts one argument
  • Loading animation is a bit finicky since data is fetched as the same time, so needs to be improved
  • Adding skeleton view with pre-loading data seemed to be taking a while, it will be picked up later
  • can talk about these points in call

Future Ideas

  • logout and avatar buttons on app top header
  • implement rewards system (work in progress)
  • archiving activity (older than 6 months)
  • profanity filter for text input on modal
  • skeleton structure for delay in data display

cultos_takehome's People

Contributors

kodeman14 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.