paulsaenzsucre / bookstore

Bookstore is a single page web app that lets users manage a book list. Users can add, edit, and remove books (title and author) from the list. It was coded using React.

Hi 👋, I'm Paul Sáenz Sucre.

A passionate full stack and desktop developer from Perú.

More about me

I am a certified full-stack web developer and a self-taught desktop developer. Currently, I am in the process of refactoring my old desktop application. The application enables users to sell food in a restaurant through a web interface. I utilize standard languages such as HTML5, CSS3, and JavaScript, along with React and Redux libraries for the front-end. For the backend, I employ Ruby on Rails and PostgreSQL.

I have had a passion for computers since my childhood. My father introduced me to coding using a programming language called BASIC. As I grew older, I took it upon myself to learn Assembly language and develop an application called DSKPATCH, which served as a hard disk sector data editor. During this time, I dedicated additional hours after school to teach myself various programming languages, such as Visual Basic 6, Standard Query Language (SQL), PASCAL, JAVA, and C#, as well as object-oriented programming and other programming paradigms.

This extensive experience has equipped me with the ability to design logically coherent algorithms, data structures, and application prototypes during the initial stages of the development process.

I am interested in

• 📚 I love to read, especially about programming, electronics, embedded devices, design, mathematics, and chess.
• 🏆 Playing chess brings me great joy.
• 🎸 In addition, I enjoy playing music. I have taught myself how to play the guitar and bass, and I am currently learning to play the keyboard.
• 🔧 Furthermore, I have a passion for crafting circuits with Arduino.

Connect with me:

Skills:

Front-end

Backend

Database

Desktop

Tools

Misc

Stats

---

Paul Sáenz Sucre

(back to top)

bookstore's Issues

Write categories actions and reducer.

Write your categories actions and reducer (in /src/redux/categories/categories.js) using the ducks pattern:

• Define an action type for checking the status.
• Set the initial state to be an empty array of categories.
• Export Action Creators for your actions.
• Write your reducer and export it as default.
  • For the check status action return a string "Under construction".
  • In case of unknown action - return the current state.

Style the Progress Bar UI

Style the progress bar UI:

• Style the progress bar component.
• Style the progress bar container

Create BooksPage component

Create a component called BooksPage that composes the BookList and AddBookForm components for displaying the Books page.

Refactor the App component

Add React Router and set two <Route>s and <Link>s for the app's navigation:

• Books - the default view
• Categories

Style the Book Information UI

Style the book information user interface:

• Style the category.
• Style the title.
• Style the author.

Create Header component

Create a component called Header that composes the Navbar component for displaying the page's header.

Create Navbar component

Create a component named Navbar for displaying the navbar for the BookStore application.

Style the Add New Book Form UI

Style the add new book form user interface:

• Style the form title.
• Style the form inputs.
• Style the form button.
• Style the form.
• Style the container.
• Arrange elements inside container.

Add New Book Feature

In the AddBookForm component, add functionality for "Add new" button click:

• Import Redux useDispatch.
• Set title and author in the local React state (NOTE: categories and comments are NOT part of this step).
• Take the inputs from the state then generate a unique id and add them to an object.
• Once your new book object is ready to be submitted to Redux store, dispatch the corresponding action.
• Keep state immutable in the reducer.

Style the App UI

Style the App user interface:

• Style the app container.
• Arrange the inside components.

Create CircleProgress component

Create a component called CircleProgress for displaying a circle progress image. It receives ratio, as props.

Write book's actions and reducer

Write your book's actions and reducer (in /src/redux/books/books.js) using the ducks pattern.

• Define action types for adding and removing a book.
• Set the initial state to be an empty array of books.
• Export Action Creators for your actions.
• Write your reducer and export it as default:
  • Define state changes for the actions that you created.
  • In case of unknown action - return the current state.

Book Component

Create a component called Book that composes a CircleProgress component for displaying a single book (receive category, title, author, chapters, currentChapter,).

Fetch book list from Bookstore API

Fetch book list from Bookstore API on Books page load:

• Add an Action Creator, that returns a function.
• Fetch list of books.
• Dispatch another action (add an action type) that will pass API response to reducer and updates the state.

NOTE: Use fetch or axios with createAsyncThunk for making API calls.

Style the Book Page UI

Style the book page user interface:

• Style the book page container.
• Style the separator.
• Arrange the components inside.

Connect Bookstore App to Redux store

Connect the Bookstore app to the Redux store:

• Import Redux Provider and your store in the main component of your React app.
• Connect Bookstore app to the Redux store.
• The default state in books reducer is an array with a few books.
• Display them in the React components. Make sure that the list of books displays books from Redux store.

Refactor Add Book and Remove Book features

Refactor add book and remove book features to persist changes in the server:

• Change existing Action Creators, so they return functions.
• Make changes by using API.
• Dispatch an action (action type that existed before refactor) that will update the state accordingly.

NOTE: Use fetch or axios with createAsyncThunk for making API calls.

Style the Percent Stats UI

Style the progress stats user interface:

• Style the progress ratio.
• Style the completed text.

Create CategoriesPage component

Create a component called CategoriesPage for display a button "Check status" only.

Add Redux Toolkit as a dependency.

Style the Action Bar UI

Style the action bar user interface:

• Style the action buttons.
• Style the button separators.
• Style the container.

Configure the Redux Store

Configure the Redux Store (/src/redux/configureStore.js):

• Importing the necessary methods from Redux Toolkit.
• Combine both reducers into a root reducer by using configureStore function.

Style the Categories Page UI

Style the categories page UI:

• Style the categories page container.
• Style the check status button.
• Style the under construction text.

Use Feature Folder & Ducks Pattern

Structure your application files using a "feature folder" approach and use the ducks pattern for your Redux files. Your files/folder structure could look like this:

Style the Book Card UI

Style the book card user interface:

• Style the book card container.
• Arrange the internal components.

Style the Book List UI

Style the book list user interface:

• Style the book list container.
• Arrange components inside the container.

AddBookForm Component

Create a separate component for this form (with inputs for a title and an author [IMPORTANT in the design you can see an input for a category - please replace it with an author.]).

Style the Page Header UI

Style the page header user interface:

• Style the header container.
• Style the Bookstore text logo.
• Style the Navbar
• Style the user icon.

Add Remove Book Feature

In the Booklist component, add a functionality for "Remove" button click:

• Import Redux useDispatch.
• Once your book object is ready to be removed from Redux store, dispatch the corresponding action.
• Keep state immutable in the reducer.

Create Booklist component

Create a component called Booklist that composes Book components for displaying the list of books: should display the list of books (empty at this point but it should be ready for the data) with the Remove button (no functionality yet).

Style the Progress Chapter UI

Style the progress chapter user interface:

• Style the current chapter title.
• Style the current chapter details.
• Style the update progress button.

Initialize React app.

• Use Gitflow.
• Create React App.
• Setup linters.
• Create a directory for components.

Style the Progress Stats UI

Style the progress stats user interface:

• Style the progress stats container.
• Style the progress separator.
• Arrange elements inside container.

Add Check Status Feature

In your CategoriesPage component, add a functionality for: "Check status" button click:

• Import Redux useDispatch.
• Dispatch the corresponding action.
• Keep state immutable in the reducer.

Setup Redux-thunk on Bookstore

Instruct Redux to use thunk:

• Add redux-thunk as a dependency.
• import redux-thunk and insert its middleware into Redux.