blog-react

Blog created with React and styled-components

Prerequisites

This project requires you to use this backend as its API: blog-react-backend

Website

The website is hosted in github pages: blog-react

Functionalities

• Contact me: sends emails
• Register: creating user with password encrypted with bcrypt
• Login: JWT request the token with the token that is saved in local storage
• Posts: Its working with pagination, showing all the posts separated by pages
• Protected routes: If user is authenticated can access /login or /register
• Create posts: Users loggedin can create posts
• Create posts: Image upload through cloudinary
• Create posts: Shows the email of the user who created it
• Posts: Users can comment posts
• Error messages: When user submits recieves an alert
• Posts: Like button(A user can only like one time per post)
• Comments: Comment form should only appear if loggedin
• Comments: Create redux actions for this
• Asked funcionality: Favicon
• Asked funcionality: Show appname on broser
• Asked funcionality: Hash of password in front end(Before the request) !?
• Asked funcioanlity: Rules for a complex password(uppercase, lowercase, one number, etc)

Getting Started

First clone the project

git clone https://github.com/joaopedrodcf/blog-react.git

Then install the node_modules

yarn

Finally

yarn start

Now its ready to use

Creating production builds

Steps needed:

• Commits wanted in master branch
• After you run the following command and the site will have your changes after some minutes

yarn run deploy

Built With

• axios - Promise based HTTP client for the browser and node.js
• formik - Build forms in React, without the tears 😭
• normalize.css - A modern alternative to CSS resets
• react - A declarative, efficient, and flexible JavaScript library for building user interfaces
• react-router - Declarative routing for React
• redux - Predictable state container for JavaScript apps
• redux-thunk - Thunk middleware for Redux
• redux-logger - Logger for Redux
• styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Misc

• npm - Package manager for javascript
• yarn - 📦🐈 Fast, reliable, and secure dependency management.
• node - Node.js JavaScript runtime ✨🐢🚀✨
• google-fonts - Font files available from Google Fonts
• 1001freefonts - 1001 free fonts
• coolors - The super fast color schemes generator!

my project setup

• babel - 🐠 Babel is a compiler for writing next generation JavaScript.
• babel-eslint - 🗼 A wrapper for Babel's parser used for ESLint
• eslint - A fully pluggable tool for identifying and reporting on patterns in JavaScript
• eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-plugin-flowtype- Flow type linting rules for ESLint.
• eslint-plugin-react - React specific linting rules for ESLint
• eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements.
• eslint-plugin-import - ESLint plugin with rules that help validate proper imports.
• eslint-plugin-babel - An ESlint rule plugin companion to babel-eslint
• eslint-plugin-prettier - ESLint plugin for prettier formatting
• flow - Adds static typing to JavaScript to improve developer productivity and code quality.
• flow-bin - Binary wrapper for Flow - A static type checker for JavaScript
• gh-pages - General purpose task for publishing files to a gh-pages branch on GitHub
• husky - 🐶 Git hooks made easy
• javascript - JavaScript Style Guide
• lint-staged - 🚫💩 — Run linters on git staged files
• prettier - Prettier is an opinionated code formatter.
• stylelint - A mighty, modern CSS linter
• stylelint-config-standard - The standard shareable config for stylelint
• stylelint-config-styled-components - The shareable stylelint config for stylelint-processor-styled-components
• stylelint-processor-styled-components - Lint your styled components with stylelint!

Docs

• This docs contains useful information that helped me build this React app and there references
• It can be useful in other projects and for others

Inject global css ThemeProvider from styled-components

In globalStyle.js

injectGlobal`
    body,
    html,
    #root {
        height: 100%;
    }
`;

source info

Add ThemeProvider from styled-components

In Routes.js

<ThemeProvider theme={theme}>
        <Global>
            <HeaderContainer />
            <MainContainer />
            <Footer />
        </Global>
</ThemeProvider>

source info

Remove dotter link borders mobile

a:active {
    outline: none;
}

source info

Debug for css

*:not(path):not(g) {
    color:                    hsla(210, 100%, 100%, 0.9) !important;
    background:               hsla(210, 100%,  50%, 0.5) !important;
    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
    box-shadow: none !important;
}

source info

Inject global css directly in your app

In your globalCss file

const globalCss = injectGlobal`
`;

export default globalCss;

Then in your main app

import './globalStyle';

source info

Prevent red shadow in required inputs on firefox

box-shadow: none;

source info