Lostarkly Next

screenshot of Lostarkly Next
nextjs
react
chakra-ui

Checklist app for Lost Ark weekly & daily tasks. (In heavy development)

Overview

LostArkly is an evolving web application designed to streamline the experience of tracking daily and weekly quests in the game Lost Ark. Built with modern technologies like Next.js, React, and TypeScript, this app is a work in progress, aiming to enhance user experience as its developer continues their journey in web development. While it's currently functional, it promises to grow with more robust features and improvements.

The user interface leverages Chakra UI, providing a clean and responsive design. However, users should be aware that the current data persistence is reliant on cookies, which may lead to some inconsistencies. Nonetheless, the potential for this app is significant as planned features roll out in the future.

Features

  • Automatic Reset: Planned functionality will allow the app to reset tasks automatically based on server timezones, making it easier for users to manage their quest schedules.
  • Manual Reset Button: Users will have the option to manually reset their tasks, providing greater control over their quest tracking.
  • Cooldown Timers: Upcoming features will include cooldown timers for each task, offering a clearer understanding of when tasks can be repeated.
  • Multiple Accounts Support: Future updates aim to add tabs for multiple characters or accounts, catering to players who manage several profiles.
  • Accessibility Improvements: The developer has identified the need for better accessibility and plans to implement improvements to support a wider range of users.
  • Enhanced State Management: Ongoing work includes addressing issues with cookie implementation by integrating state management and local storage techniques for a more stable experience.
nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

chakra-ui
Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.