nanostore for efficient state management.shadcn/ui components in the project.| Event | Day | Date | Time |
|---|---|---|---|
| Release | Wed | Oct 16 | 09:00 AM ET |
| Due | Fri | Oct 25 | 05:00 PM ET |
In this assignment, you will start implementing a simple Flashcards App. You will continue working on this app in the upcoming homework assignments. The starter code is a basic React app created with Vite, and it uses TypeScript and TailwindCSS. Several libraries, including shadcn/ui, prettier, and eslint have already been installed and configured for your convenience.
Deck: In the context of this Flashcards App, a deck refers to a collection or set of flashcards. It can be thought of as a category or topic under which related flashcards are grouped together.
Flashcard: A flashcard is a small card used for learning and memorizing information. In the Flashcards App, each flashcard represents a question or prompt on one side and its corresponding answer on the other side. Users can flip the flashcard to test their knowledge and review the information.
For this homework, your focus will be on creating, deleting, editing, and rendering decks.
Please see the demo on Panopto.
Begin by logging into your GitHub account at https://github.com/. Then, accept the invitation by clicking on this link. This action will create a private GitHub repository with the starter code.
Please keep the repository private. Do not change its visibility or add collaborators. Clone this repository to your local machine to start your work.
Clone the repository to your local machine and follow the instructions in the README file to set up the project. You’ll notice that the project structure is similar to the one we used for the Posts app. The sidebar includes a home icon, a search icon, and an “add” button. The home and search icons will not have any functionality for this homework. The feed, located to the right of the sidebar, should consist of a header and a list of decks. The header already contains filters to switch between viewing decks and cards. For this homework, only the decks filter should be active.
Develop the app according to the provided description, specifications, and demo. When done, you should have the following files and folders inside the src folder:
.
├── README.md # Project setup instructions.
├── api # Directory for mock API server.
│ ├── db.json # JSON file where mock data is stored.
│ ├── package.json # Package.json file for the mock API server.
│ └── seed.json # JSON file for seeding the mock data.
└── web # Directory for the React app.
├── components.json # Configuration file for shadcn/ui components.
├── index.html # HTML template for the app.
├── package.json # Package.json file for the React app.
├── pnpm-lock.yaml # Lock file for pnpm package manager.
├── postcss.config.js # PostCSS configuration file.
├── public # Directory for static assets.
│ └── favicon.png # Favicon for the app.
├── src # Source code directory.
│ ├── App.tsx # Main application entry point, wraps other main components.
│ ├── components # Directory for React components.
│ │ ├── add-deck-dialog.tsx # Dialog component to add a new deck.
│ │ ├── deck-actions.tsx # Component for actions like editing or deleting a deck.
│ │ ├── deck.tsx # Single deck component, displays deck details.
│ │ ├── decks.tsx # Component that renders a list of decks.
│ │ ├── edit-deck-dialog.tsx # Dialog component to edit an existing deck.
│ │ ├── feed.tsx # Component to display a list of decks/cards.
│ │ ├── header.tsx # Header component, switch between decks or cards.
│ │ ├── sidebar.tsx # Sidebar component, includes the button to add a deck.
│ │ └── ui # Shadcn/ui uses this directory for reusable UI components.
│ │ ├── button.tsx # Button UI component.
│ │ ├── buttonVariants.tsx # Button variants for different styles.
│ │ ├── dialog.tsx # Dialog UI component.
│ │ ├── dropdown-menu.tsx # Dropdown menu UI component.
│ │ ├── input.tsx # Input field UI component.
│ │ ├── label.tsx # Label UI component.
│ │ ├── toast.tsx # Toast notification UI component for brief messages.
│ │ ├── toaster.tsx # UI component to manage and display a collection of toast notifications.
│ │ └── use-toast.ts # Custom hook to trigger and manage toast notifications.
│ ├── data # Directory for data related files.
│ │ ├── api.ts # API functions (interacting with the mock API).
│ │ └── types.ts # TypeScript type definitions.
│ ├── env.ts # Read environment variables from .env file and export them.
│ ├── hooks # Directory for custom React hooks.
│ │ ├── use-mutation-decks.tsx # Custom hook for mutating (creating, updating, deleting) decks.
│ │ └── use-query-decks.tsx # Custom hook for fetching/querying deck data.
│ ├── index.css # Global CSS styles.
│ ├── lib # Directory for utility functions, etc.
│ │ ├── store.ts # Nanostore for state management.
│ │ └── utils.ts # Miscellaneous utility functions.
│ ├── main.tsx # Entry point for the Vite app, renders App.tsx.
│ └── vite-env.d.ts # Type definitions for Vite environment variables.
├── tailwind.config.js # TailwindCSS configuration file.
├── tsconfig.app.json # TypeScript configuration file for the app.
├── tsconfig.json # TypeScript configuration file for the project.
├── tsconfig.node.json # TypeScript configuration file for the Node environment.
└── vite.config.ts # Vite configuration file.You don’t need to deploy this app as a GitHub page. However, don’t forget to update the info.json file with links to your GitHub repository:
{
"repo": "",
}Make sure to commit and push the updated info.json file to your GitHub repository. After doing so, submit your work on Gradescope.
If you need to resubmit, push the changes to your repository first, then re-submit on Gradescope.
Teaching assistants will evaluate your submission using the following criteria:
Spec 1: The Flashcards App should resemble the demo app from the homework instructions, but it doesn’t need to match exactly. For example, replicating finer UI features like the deck appearance isn’t required.
Spec 2: When the app starts, the deck list should display all the decks fetched from the mock API. Each should appear as a card in a scrollable list, showing its title and card count. Since this assignment doesn’t involve card creation, each deck should show zero cards.
Spec 3: Each deck card should have a deck actions dropdown menu, represented by an ellipsis icon in the top right corner. This dropdown should provide options to edit or delete the deck.
Spec 4: Deleting a deck from the dropdown menu should remove it from view immediately, without requesting confirmation.
Spec 5: Clicking the “add” button in the sidebar should open an “Add Deck” dialog. The “Add Deck” dialog should include an input field for the deck title, initially empty, and “save” and “cancel” buttons.
Spec 6: Clicking the “save” button in the “Add Deck” dialog should create a new deck with the entered title and add it to the deck list. The “cancel” button should close the dialog without adding a deck.
Spec 7: Editing a deck from the dropdown should open an edit dialog similar to the “Add Deck” dialog, but with the current deck title pre-filled. Users should be able to update the title and save changes, or cancel without altering the title.
Spec 8: Use Nanostore for state management, defining the global state and related actions in the store.ts file in the lib folder.
Spec 9: The application should interact with the mock API. Specifically, implement Create, Read, Update, and Delete (CRUD) operations for decks, defining these operations in the api.ts file in the data folder.
Spec 10: Properly implement the custom hooks in use-query-decks.tsx and use-mutation-decks.tsx to encapsulate fetching and mutating deck data. These operations should call the mock API operations and update the state via the Nanostore.
Spec 11: All React components should be organized within the components folder. Use shadcn/ui components to create UI elements, specifically from the ui sub-directory in the components folder.
Spec 12: The application should handle errors gracefully. For example, if a user tries to save an empty deck title, provide appropriate feedback. Similarly, inform users of any issues that arise when interacting with the mock API. Use the toaster component and the use-toast custom hook for error handling.
Spec 13: The application should run smoothly without errors or issues. Remove any debugging messages or console logs before submission.
Spec 14: Use TypeScript for type safety and code clarity, defining and using the Deck type in relevant areas to ensure consistency when working with decks. The code should have no TypeScript errors or warnings.
Spec 15: Adhere to best practices in code readability, including consistent indentation, clear naming, and relevant code comments. Organize and structure code effectively, using separate, well-named functions for different functionalities, each with a single responsibility.