Dyrits

Codecademy Store

In this project, you’ll build a program that mimics Codecademy’s own online store! The application should display products from the Codecademy store and allow the user to add them to their cart. In the cart, the user can adjust the quantity of each item and the running total will be displayed at the bottom. Lastly, the user can choose the currency for the entire application.

This application has three slices of state:

• inventory: An array of objects representing the items that are available to purchase.
• cart: An object that maps the name of each item added to the cart to an object with the price and desired quantity for that item.
• currencyFilter: A string that represents the currency used to calculate the prices displayed to the user: 'USD', 'CAD' or 'EUR'.

Dyrits

Matching Memory

When introducing Redux to a React application, you transfer the responsibility of state management over to Redux. This is great because Redux is really good at state management, but this also hinders React’s optimized UI rendering. That is why react-redux was created to bind the UI rendering of React to the state management of Redux.

This project explores where react-redux fits into an application by finishing off the implementation of a one-player matching game.

The application consists of 5 React components:

1. App: The root component, App renders the Score and Board components.
2. Score: Child of the App component, Score will display the number of matched cards.

Dyrits

Expense Tracker

This project—a budgeting and expense tracking app—allows you to practice refactoring with Redux Toolkit. The app allows you to set budgets for various categories, such as food and transportation, and track transactions in those categories. It then sums your spending in each category to calculate the amount of money that remains to be spent.

To help you to understand how the data of the application works, consider an example of the Redux store’s state:

{
  budgets: [ 
    { category: 'housing', amount: 400 },
    { category: 'food', amount: 100 },
    ...

Dyrits

Film Finder

You’ve caught up on your list of TV shows and movies and want to get recommendations for what to watch next, but aren’t sure where to look. In this project, you’ll use your knowledge of HTTP requests and asynchronous JavaScript to create a movie discovery app that will recommend random movies by genre. You’ll be able to choose from several genres, and like or dislike a movie to get another suggestion.

Before you begin, you’ll need to create an account on The Movie Database website. After you create your account and verify your email address, click on your user icon at the top right corner and navigate to the Settings page.

On the Settings page, navigate to the API section and click on the link to Request an API Key to register as a Developer.

You’ll be asked to enter some personal information like your

Dyrits

Redux News Reader

This project—a news reader in which users can view and comment on various articles—gives you an opportunity to practice using Redux Toolkit’s createAsyncThunk and createSlice utilities to add asynchronous functionality to your Redux applications.

Currently, the app fetches and displays a list of all articles in their preview form. It also fetches and displays the current article, which can be selected and changed by the user. The code for these features is accessible in the features/articlePreviews and features/currentArticle directories respectively.

Your task will be to complete the comments feature. Whenever the featured article changes, you will asynchronously fetch the comments for that article and add them to your store so they display under the article. Likewise, when a user submits a new comment, you will submit it to the server via an asynchronous request and display it in the article’s list of comments once it has been successfully created.

Before you get started,

Dyrits

Fashion Blog

Your friend Isa is a budding fashion blogger, and she’s asked you to build her a new website, just in time for New York Fashion Week!

Use your new HTML knowledge to create the underlying structure of the blog. Make sure to include plenty of pictures, links, lists, and other HTML elements that you’ve learned so that her fans have plenty to read.

You can view a completed project and see how it compares to your work!

Dyrits

Wine Festival Schedule

The Aguillar Family is hosting their annual wine festival and they have asked you to build a web page for the event schedule! Use your knowledge of HTML to display a table to the attendees.

You can preview the final version at this link.

Let’s begin!

Dyrits

New York City Blog

After researching New York City, you decide to create a blog for your viewers who want to know more about the city. It’s time to create a blog to show off how amazing the Big Apple is. You got this!

Don’t forget to save your code after each step. By pressing save to run your code you will see the changes you’ve made in the browser.

Note: While you are developing the webpage, you will notice that the elements are automatically assigned colors, borders, and positioned properly. This is because of the CSS file. Don’t worry about CSS right now, it’s only there so that the webpage looks nice.

Dyrits

Healthy Recipes

Using CSS selectors, you’ll give a recipe website some new style!

Dyrits

Olivia Woodruff Portfolio

In this project, you’ll use your knowledge of CSS visual rules to create rule sets and improve the appearance of a photography portfolio site!