Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreynav/social-network
Social network app for programmers | React, Redux-toolkit
https://github.com/andreynav/social-network
it-kamasutra react redux-toolkit reduxjs-toolkit social-network styled-components type-application typescript
Last synced: 9 days ago
JSON representation
Social network app for programmers | React, Redux-toolkit
- Host: GitHub
- URL: https://github.com/andreynav/social-network
- Owner: andreynav
- License: apache-2.0
- Created: 2022-09-09T13:21:25.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T18:18:10.000Z (about 2 years ago)
- Last Synced: 2024-12-20T04:47:47.669Z (2 months ago)
- Topics: it-kamasutra, react, redux-toolkit, reduxjs-toolkit, social-network, styled-components, type-application, typescript
- Language: TypeScript
- Homepage: https://social-network-4geeks.vercel.app
- Size: 1.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# General Notes
The current project is a project of social network executed due to the React, Redux, Styled components.
The project used the API calls to back-end, possibility to set up your own user profile, set up the languages and themes.
## Demo
You can open and use the app by [social network app link](https://social-network-4geeks-git-master-andreynav.vercel.app/).
Use free account for login: **Email:** `[email protected]` **Password:** `free`.
To find an author's private profile use the endpoint `/profile/26100` inside the app 🙂
## Project structure
The project has multilayer structure:
- `public` - used to keep static content for builds
- `api` - used to keep API calls functionality
- `assets` - used to keep static content
- `components` - used to keep react components
- `App` - used to keep main App component
- `...` - rest of components
- `common` - used to keep common for whole app components
- `fonts` - used to keep fonts
- `hoc` - used to keep Higher Order Components
- `hook` - used to keep hooks
- `locales` - used to keep locales for translations
- `store` - used to keep store
- `styles` - used to keep styles
- `tests` - used to keep tests
- `types` - used to keep TypeScript common types
- `utils` - used to keep utils for helping
```
.
├── public
└── src
  ├── api
  ├── assets
  ├── components
  │  ├── App
  │  ├── Captcha
  │  ├── Dialogs
  │  ├── Footer
  │  ├── FormPostMessage
  │  ├── Header
  │  ├── InputField
  │  ├── Login
  │  ├── Music
  │  ├── Navbar
  │  ├── News
  │  ├── NotFound
  │  ├── Paginator
  │  ├── PhotoSection
  │  ├── Profile
  │  │  ├── MyPosts
  │  │  └── ProfileInfo
  │  ├── Settings
  │  ├── TextAreaField
  │  ├── Users
  │  ├── common
  │  │  ├── Avatar
  │  │  ├── Button
  │  │  ├── Label
  │  │  ├── Like
  │  │  ├── Loader
  │  │  ├── Logo
  │  │  ├── Radio
  │  │  ├── Select
  │  │  └── Toggle
  ├── fonts
  ├── hoc
  ├── hook
  ├── locales
  │  ├── en
  │  └── ru
  ├── store
  ├── styles
  ├── tests
  ├── types
  └── utils
```
## Dependencies
The project has the next dependencies in the [package.json](package.json) file.
## Installation
1. Clone project to your PC by the following command:
```console
git clone https://github.com/andreynav/social-network.git
```
2. Open the root directory and enter the following command:
```console
yarn
```
3. In the root directory create `.env` file and add inside it a row `REACT_APP_API_KEY=XXXX` where `XXXX` is your API key for getting back-end. To get API key you need to create your own account on the [Social Network API](https://social-network.samuraijs.com/) site. Also, you can add a row like `PORT=3001` to `.env` file, and run the project on the desired port.
## Running project
To run project, open the root directory and enter the following command:
```console
yarn start
```
The command runs the app in the development mode.
Open [http://localhost:3001](http://localhost:3000) to view it in your browser.
## Running tests
To run the tests, open the root directory and enter the following command:
```console
yarn test
```
Launches the test runner in the interactive watch mode.
See the folder [tests](src/tests) for information about existing tests.
## Running build
To run build, open the root directory and enter the following command:
```console
yarn 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](https://facebook.github.io/create-react-app/docs/deployment) for more information.
## License
The project is open source software provided under the [Apache License 2.0](LICENSE.md).