Proximity Post-it

Proximity Post-it
Express yourself and share ideas. Vite + React + TypeScript + Redux + Tailwind
🐞 Report a bug or 🙋‍♂️ request a feature

• Proximity Post-it
  • The Project
    • Task
    • Features
    • Built With
  • How to run this project
    • Prerequisites
    • Run it (Quickstart with docker)
    • Installing the project
    • Available Scripts
      • npm start
      • npm run build
    • Learn More
      • Vite
      • React
      • TypeScript
      • Tailwind CSS
      • Formatter and Linter
  • Potential Features
  • Author
  • Contributing
  • Show your support and acknowledges
  • License

The Project

You are working on a new feed to promote the company social network activity, you are provided with access to the account’s posts and comments, your job is to integrate that activity into the website.

Task

Build a ReactJS project that fetches from the posts and comments API’s, presents a list of posts and when any of the items is clicked show the list of comments that are associated with that specific post.

You are responsible for:

• Fetching the data from the API.
• Presenting the data in the view.
• Relate comments to posts.

Posts API:
https://jsonplaceholder.typicode.com/posts
Comments API:
https://jsonplaceholder.typicode.com/comments

Features

• Sets eslint rules
• Linters
• React
• React-DOM
• React-Create-App
• Typescript
• ES6 syntax
• Export/import ES6+ notation

Built With

• vite
• ESLint
• npm
• vscode with ESLint extension
• Linux/GNU
• Love and Passion for code

How to run this project

Prerequisites

• npm 6.14 +
• node 14.17 +
• docker and docker-compose (optional)
• A Text Editor like VSCode
• A browser like Firefox or Chrome

Run it (Quickstart with docker)

• Be sure to setup docker-compose and have git and npm working.
• Run this:

> git clone https://github.com/Israel-Laguan/proximity-post-it.git
> cd proximity-post-it
> npm i
> docker-compose build
> docker-compose up frontend

• Enter localhost:3000 in a browser for the frontend.

You can also test using docker, run docker-compose up test or docker-compose run --rm test

Not a fan of Docker or need more information? Continue for instructions to learn more about how to setup your PC for run the frontend!

We used create-react-app to initialize this project, so it is configurated to be easy to run. Just follow the following instructions.

Installing the project

Now that you are set up, open a terminal and:

git clone https://github.com/Israel-Laguan/proximity-post-it.git
cd proximity-post-it
npm i && npm start

Then open localhost:3000 to see the app.

Available Scripts

In the project directory, you can run:

npm start

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

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

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.

Learn More

Vite

Vite is a fast frontend build tool. According to the README, it consists of two major parts:

• A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

React

React is a JavaScript library for building user interfaces.

Due to its awesome renderer system, there are many React Renderor. So React can be not used only Web, for example, used by React Native.

Let's dive into React and Vite can use with React.

TypeScript

TypeScript is a superset of JavaScript. It is just one of NPM library, but it provides an original compiler.

When you use TypeScript with React, you can write JSX with TypeScript, called TSX. Then you can develop views written by Type-Safe template.

Tailwind CSS

Tailwind CSS is modern utility-first CSS framework. It provides many CSS rules, but these are purged when production builds. So developers do not worry about CSS asset size for performance optimization.

In VSCode, I recommend to use intellisense extension.

Frequently, React developers are worried about how to write CSS in TSX(JSX) template. You must choose from CSS Modules, styled-components, linaria, and so on. Additionally, CSS architecture is difficult about scoping, e.g. BEM, FLOCSS.

When you decide to use Tailwind, you only write utility-first CSS classes, you don't have to worry about them!

Formatter and Linter

Already set up ESLint and Prettier. You can customize the rules.

NOTICE: The template does not use eslint-plugin-prettier and prettier-eslint. So I recommend that running commands individually. e.g. prettier && eslint.

Please read: https://prettier.io/docs/en/integrating-with-linters.html.

Potential Features

• Update style.
• <Insert your great idea here!>.

Author

Israel Laguan	Email me to contact@israellaguan.com Connect to my Linkedin

Contributing

🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.

Show your support and acknowledges

🤗 Give a ⭐️ if you like this project!

This project is possible with help from:

• Vite configuration from meijin and simerlec
• Lint configuration from Camilo Martinez and simerlec
• Icons from Icons8
• Banner from canva.com
• Favicon from favicon.io

License

📝 This project is licensed under the Apache 2
Feel free to fork this project and improve it!