/tokenlab-danilo-test

A test for a FullStack web developer at TokenLab Company

Primary LanguageJavaScriptMIT LicenseMIT

tokenlab-danilo-test

This is a test for fullstack developer in TokenLab made in a week, and with more time I will refactor and add more features (probably).

This is a fullstack application built with the fammous MERN STACK. It' is a simulation for an event tracking app, with full authentication, user creation, event creation and edition, validation for event dates overlaping (for user and for guests) and so on...

Front-end

The front-end of this application is developed using:

  • Vite: a fast build tool for modern web development.
  • React: a popular JavaScript library for building user interfaces (SPA approach).
  • Formik: a library for building forms with React.
  • Yup: a schema validation library.
  • Tailwind CSS: a utility-first CSS framework.
  • React Query: a library for fetching and managing async data in React applications.

Back-end

The back-end of this application is developed using:

  • Node.js: a JavaScript runtime for server-side development.
  • Express: a fast and minimalist web application framework for Node.js.
  • MongoBD: a NoSql lightweight database.

Getting Started

⚠️ **WARNING **: This monorepo requires Docker and Docker Compose installed before proceeding.

To get started with this project, follow the steps below:

  1. Clone the repository.
git clone https://github.com/Danilo-Guedes/tokenlab-danilo-test.git
  1. cd into the project folder.
cd tokenlab-danilo-test
  1. run the docker compose to initiate the application.
docker-compose up --build
  1. Open the browser at http://localhost:5173/ (default port for vite apps) and use the application.

What I would do if I had more time ?

  1. Adopt a DDD or Clean Architecture approach to prepare the code for a healthier and growth.
  2. As you create the domain entities, make better use of OOP and making sure the core functionalities are not coupled with third party libraries, making sure the code is easier to maintain and easier to test.
  3. Write tests for the application.
  4. Create a class to standardize backend errors.
  5. If it were a real project, I would be using TypeScript instead of vanilla JavaScript.
  6. Add better loading states (skeletons and spinners) and of course add small animation to make the UI and UX even more friendly.

Screenshots

Home Desktop Screenshot

Empty Events List Svg

Event Form Validation

DatePicker Validations

Event Exclude Modal

Event List Desktop Screenshot

User Overlap Toast

Guest Overlap Toast

Event List Mobile Screenshot

Event Edition on Mobile

Home Mobile Screenshot

user Profile Mobile Screenshot

License

This project is licensed under the MIT License.