Welcome to Fulstack Open 2022 - Blog List Frontend

This is the frontend component of the Blog List application. The main focus of this project is on building an application with ReactJS that uses REST APIs built with Node.js.

The app allows users to create and manage a list of blogs, with features such as adding, editing, and deleting blogs. This project serves as a great example of how to build a modern and responsive web application using ReactJS and other cutting-edge web development technologies.

Fullstack Open 2022 course

This project is part of the Fullstack Open 2022 course, a comprehensive course that introduces learners to modern web application development using JavaScript. The course covers a wide range of topics including building single-page applications using ReactJS, REST APIs built with Node.js, and GraphQL. Participants will learn about testing, configuration, environment management, and the use of databases for storing application data. The course is free of charge and offers a certificate upon completion, as well as the opportunity to earn 5-14 ECTS credits from the University of Helsinki.

The course is designed for individuals with good programming skills and basic knowledge of web programming and databases, as well as familiarity with Git version control. Participants are expected to have perseverance, independent problem-solving skills, and the ability to seek out information when necessary.

The course has partnerships and affiliations with companies such as Houston Inc, Terveystalo, Elisa, Unity Technologies, and Konecranes. Guest lectures by experts from these companies are included in the course material. Participants can join the conversation and discuss course-related topics in the dedicated Discord and Telegram groups. Overall, Full Stack Open 2022 provides a comprehensive and practical introduction to modern web application development using the latest tools and technologies.

✨ Demo

You can access demo of the application at the following URL:

• https://fso2022-bloglist-backend.fly.dev

With the demo, you can test the following features:

• Login with an existing user
• Create a new blog
• View a list of blogs
• Delete a blog
• Like a blog

To access the demo, you can use the following credentials:

• User: demo
• Password: demopassword

Backend

The backend component of the application is available at the following URL:

• https://github.com/josenaldo/fso2022-bloglist-backend

Prerequisites

Before you begin, ensure you have met the following requirements:

• You have installed the latest version of Node.js
• You have installed the latest version of Yarn

Installation and Setup

Install all dependencies of the project. Must be run once before other scripts, right after the clone or download.

yarn install

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

yarn start

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn build

Ejects the project from react-scripts, allowing customization of the project configuration.

yarn eject

Runs the ESLint linter on the source code files with .js, .jsx, .ts, or .tsx extensions located in the src directory.

yarn lint

Runs the unit tests for the app using react-scripts and the testing framework set up for the project.

yarn test

Runs the unit tests for the app using react-scripts and generates a coverage report.

yarn test:coverage

Runs the Cypress end-to-end (E2E) tests in the headless mode.

yarn cypress:open

Opens the Cypress Test Runner.

yarn cypress:open

Technologies

This project uses the following technologies:

Dependencies

• Axios
  • A promise-based HTTP client for the browser and Node.js.
• Date-fns
  • A library for manipulating dates in JavaScript.
• Date-fns-tz
  • A library that extends date-fns with support for time zones.
• Prop-types
  • A runtime type checking for React props and similar objects.
• React
  • A JavaScript library for building user interfaces.
• React DOM
  • A package for working with the DOM in React.
• React Scripts
  • A set of scripts and configuration used to create React apps.
• Web Vitals
  • A set of metrics that help developers understand the quality of user experience of their web pages and apps.

Development Dependencies

• Cypress
  • A fast, easy and reliable testing tool for anything that runs in a browser.
• ESLint
  • A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
• ESLint Config Prettier
  • A configuration for disabling ESLint rules that conflict with Prettier.
• ESLint Plugin Cypress
  • A plugin that adds Cypress globals to the ESLint global scope.
• ESLint Plugin Jest
  • ESLint plugin for Jest.
• ESLint Plugin React
  • React specific linting rules for ESLint.
• JSON Server
  • A full fake REST API with zero coding in less than 30 seconds (seriously).
• Testing Library Jest DOM
  • Custom Jest matchers to test the state of the DOM.
• Testing Library React
  • A lightweight and simple testing utility for React.

Deployment platforms

• fly.io
  • A platform for running applications on a global edge network.

References

• https://picsum.photos/

Author

👤 Josenaldo de Oliveira Matos Filho

• Website: <josenaldo.github.io>
• Twitter: @josenaldomatos
• Github: @josenaldo
• LinkedIn: @josenaldo

License

This project is licensed under the MIT License - see the LICENSE file for details.

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator and improved by ChatGPT