Résolab

About the project...

Résolab is a social network project, created for children.

Its aim is to initiate children into developping good habits on social media, by experimenting Résolab.

Prerequisites

Node > 10.16.3 Npm > 6.13.6

Getting Started

This project was bootstrapped with create-react-app. See doc here

git clone
npm install # Install all dependencies
npm start # Starts the development server

Environment variables

You have to create a .env file in your root project directory.

# API entrypoint
REACT_APP_API_URL=http://localhost:8089/api

# API's server entry point for image's url creation.
REACT_APP_MEDIA_URL=http://localhost:8089

# WebSocket entry point for instantaneous's chat.
REACT_APP_WEBSOCKET_URL="http://localhost:8000"

# entry point for the deferred chat and stockage's messages in the database.
REACT_APP_CHAT_URL="http://localhost:8000/chatMessages"

Standards

We tend to follow the AirBnB React Styleguide We also used Prettier for our code's indentation 🤓 Nearly all components are functions with Hooks. Our variables are written in camelCase. 🐫 Components are written in PascalCase.

Our stack

• React
• Redux
• Material-UI
• Axios

How do we name our files and line up them

Our project contains a common interface, which is used at both for the userpage and moderatorpage.

src
├── AdminPage # all components relative to the administration panel
├── Assets # pictures and logos for the website
├── Layout
├── LoginPage # specific to the LoginPage
├── ModeratorPage # special features and files for ModeratorPage
├── SettingsPage # used as route for back-office management
├── UserPage # special features and files for UserPage
├── commonComponent # components which are used both for UserPage and ModeratorPage
│ ├── Chat # components for Chat
│ │ ├── DisplayContacts # display for contacts list on Chat
│ │ └── messages # components for Messages
│ ├── Notifications # Notifications for a Publication (like, comment)
│ ├── Publications # Parent component for a Publication
│ │ └── Comments # comments for a Publication
│ └── Stories # 24 hours fleeting Publications
├── hooks # custom hooks
├── reducers # for Redux
└── utils # useful functions

So the common components are in the commonComponent folder.

You will find on this folder subfolders in relation with the different constitutive components of the project (such as Chat, Comments, Notifications...)

adminPage part is used as Back-office part for the users's registration and management.

Who are we?

We are a 5 developpers team who did this project, formed of 4 front-end developers in React/JS and one back-end developper in PHP.

Front-end developpers React/JS & back-end developpers Node/JS:

Stéphane Lavaud

Github

Linkedin

Angélique Wons

Github

Linkedin

Front-end developpers React/JS:

Clara Desperben

Github

Linkedin

Monia Polus

Github

Linkedin

Back-end developper PHP:

Anne-Claire Nanot

Github

Linkedin