Listet App

Colors

UI Design

While designing the app was not the main focus of this project, I wanted to create a clean and intuitive user interface that would make it easy for users to create, manage, and share lists. In the process, I wanted to instill some of the principles of good UI/UX design that I have learned over the years and improve my design skills in general.

Listet was the introduction for me to adopt a component-first approach to design. Since Angular's architecture encourages the creation components within a page layout. During my design phases of different featues I create many components, pages, and user flows. Some of them can be seen below:

Development

I wanted to break out of "tutorial hell", so I challenged myself to not watch any direct tutorial building out full applications or similar components. Instead videos and articles I consumed were more relating to learning more about the fundelmentals of the programming languages I was using.

The codebase is split between two different repos (backend and frontend). The backend consisted of ExpressJS, MySQL, and Socket.io. I had used Express a few times in the past but never to fully create a backend api from scratch. The challenge was creating a RESTful API to handle business logic and data storage.

My initial process consisted of designing the some of the frontend componets and implementing the backend api. I was doing that while it work for some of the basic features, as the complexity of the app grew I found that I need to have a better understanding of the frontend and backend interactions. I started to write the features I wanted to implement so I could have a better understanding of the data flow between the frontend and backend. From that I was able find out the project requirements so I could steamlined the development process. This led to a major refactor of the backend api and the frontend components.

Database Schema

One of pivotal moments in the development of Listet when I started to Learn about database design. Prior to implementing MySQL in the project I was using hardcoded mocked data to create the frontend interactions. As I started creating database tables for the API I learned about creating relationships between tables. While I was doing at first worked, a mentor of mine leaded me in a different direction that would make the database more efficient and easier to manage.

erDiagram
    USERS {
        int id
        text avatar
        text lastName
        text email
        text username
        text firstName
        int admin
        int deactivated
        text PASSWORD
        text verification_status
        varchar(30) reset_token
    }

    SESSIONS {
        int id
        bigint expires
        mediumtext data
        varchar(128) session_id
    }

    LISTS {
        int id
        varchar(70) slug
        text name
        text description
        datetime creation_date
        datetime deadline
        int visibility
        int allow_comments
        int is_complete
        int featured
        int user_id
    }

    LIST_ITEMS {
        int id
        text item
        datetime deadline
        int completed
        int list_id
    }

    LIST_COMMENTS {
        int id
        text comment
        datetime creation_date
        datetime date_updated
        int user_id
        int list_id
    }

    VIEW_LISTS {
        int id
        varchar(70) slug
        text name
        text description
        datetime creation_date
        datetime deadline
        int visibility
        int allow_comments
        int is_complete
        int featured
        text firstName
        text lastName
        text owner_username
        int owner_id
        int deactivated
    }

    VIEW_LIST_ITEMS {
        int id
        text item
        datetime deadline
        int completed
        varchar(70) slug
        int owner_id
        text username
        int deactivated
    }

    VIEW_COMMENTS {
        int id
        text comment
        datetime creation_date
        datetime date_updated
        int author_id
        text username
        text firstName
        text lastName
        int list_id
        int list_owner_id
        text slug
        int deactivated
    }

    USERS ||--o{ SESSIONS : "has"
    USERS ||--o{ LISTS : "creates"
    LISTS ||--o{ LIST_ITEMS : "contains"
    LISTS ||--o{ LIST_COMMENTS : "has"
    VIEW_LISTS ||--o{ VIEW_LIST_ITEMS : "aggregates"
    VIEW_LISTS ||--o{ VIEW_COMMENTS : "aggregates"