This is a portfolio application used to showcase my skill in React and Redux.
BugTracks allows users to create an account, create projects, and create tickets for managing their project tasks.
The deployed application can be found at the following URL, https://bugtracks.azurewebsites.net/.
The application has been deployed to Heroku.
The GitHub for the API can be found at the following link which was developed using C#, ASP.NET Core 3.1, Entity Framework Core, and SQL Server.
The features implemented accomplish the goal of making the Minimum Viable Product of a Bug Tracking app.
You can sign in as a demo user so that you can quickly navigate the site and view its features.
Once you are successfully authenticated with a JSON Web Token, you have the pages for viewing projects, creating a new project, viewing tickets, or creating a new ticket.
You are also able to view a project's details as well as view and update a ticket's details.
The skills I demonstrate in this project include the following.
- Utilize Redux as single source of truth to reduce prop drilling
- Implement styled components for organized and reusable CSS styles
- Develop asynchronous JavaScript to make request to a Web API
- Created controlled components for login, register, create ticket, and create project pages
- Implement action creators, actions, reducers, and selectors for interacting with Redux Store
- Use React Router to implement a Single Page Application
For the pages, I organized the corresponding React Components to be in the pages directory. Here is my implementation for the Create Ticket page component. Here
For components that are to be used as a child within a parent page component, I organized them to be in the components directory. Here is an example of a component I implemented. Here
The asynchronous service calls have been organized to be in the services directory as to decouple it from the component logic. Here is an example for the project services file. Here
Styled components have also been put into their own file and imported into the component that uses it. Here is an example of the styled components for the login page. Here
The redux store can be found within the store directory and you can see my implementation for the User slice of the Redux store. Here
Thank you for checking out my project.
Steven Garcia
- Website: https://stevengarcia.netlify.app/
- LinkedIn: https://www.linkedin.com/in/stevengarciadev/