Listicle

Table of Contents

• Abstract
• Technologies
• Code Architecture
• Install and Set Up
• Illustrations
• Wins
• Challenges
• Contributors
• Project Specs

Abstract

Web application that allows the user to create project boards with 3 stages and nested activities and task lists. The user is also able to create and delete activities, tasks and projects. The user can mark a task as completed.

Technologies

• SvelteKit
• TailwindCSS
• Houdini
• GraphQL
• Ruby on Rails
• Cypress
• TravisCI

Install and Set Up

To run Cypress tests:

1. Clone down the Readme repo
2. Cd into Listicle-UI
3. Run npm install
4. Run npm start
5. Your browser will open the website.
6. In a separate terminal, run npx cypress open
7. Cypress browser will load, choose a test and see the results

Code Architecture

We structured our architecture with 3 reusable components and 4 route components with 2 stores to access and modify data across the application

If you're interested on seeing the planning and execution of this project you can take a look to the wire frame, architecture diagram and project board:

• Wire Frame
• Project Board
• Architecture Diagram

Illustrations

Wins

• Learned and implemented Svelte, SvelteKit, TailwindCSS and Houdini GraphQL Client
• We worked with backend team to create a fullstack application
• We figure out how to integrate SvelteKit and Houdini GraphQL Client with limited resources for being very new technologies

Challenges

• We had challenges configuring our Vite compiler to work smoothly with all of the packages
• We tried using Apollo client with SvelteKit and it didn't work smoothly
• We had challenges using Houdini GraphQL Client to communicate with our GraphQL server

Future Features

• Create functionality to allow the user to add notes to the activities/missions
• Create functionality to allow the user to create independent to do lists
• Create functionality to allow the user to create independent notes

Contributors

• Carlos Gomez
• Erin Quinn
• Samantha Peterson
• Kevin Nguyen
• Paul Chambers

Project Specs

• The project spec & rubric can be found here