https://github.com/ladunjexa-pbl/mern-wixie-social-network
incredible Full-Stack Wixie Social Network application using MERN Stack 🪐
https://github.com/ladunjexa-pbl/mern-wixie-social-network
jwt-authentication material-ui mern-stack redux social-network
Last synced: 3 days ago
JSON representation
incredible Full-Stack Wixie Social Network application using MERN Stack 🪐
- Host: GitHub
- URL: https://github.com/ladunjexa-pbl/mern-wixie-social-network
- Owner: ladunjexa-pbl
- License: mit
- Created: 2023-01-14T04:39:15.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-13T18:29:21.000Z (over 1 year ago)
- Last Synced: 2025-02-28T10:52:40.409Z (8 months ago)
- Topics: jwt-authentication, material-ui, mern-stack, redux, social-network
- Language: JavaScript
- Homepage: https://wixie-social-network.vercel.app
- Size: 16.4 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Wixie
Wixie is a fully responsive Full-Stack Social Network App with everything you can imagine - using MERN Stack
View Demo
·
Documentation
·
Report Bug
·
Request Feature
# :notebook_with_decorative_cover: Table of Contents
- [About the Project](#star2-about-the-project)
* [Folder Structure](#bangbang-folder-structure)
* [Environment Variables](#key-environment-variables)
* [Tech Stack](#space_invader-tech-stack)
- [Getting Started](#toolbox-getting-started)
* [Installation](#gear-installation)
* [Run Locally](#running-run-locally)
- [Data Model](#information_source-data-model)
- [Media](#milky_way-media)
- [Contributing](#wave-contributing)
- [License](#warning-license)
- [Contact](#handshake-contact)
- [Acknowledgements](#gem-acknowledgements)
## :star2: About the Project
Wixie is an outstanding Full-Stack social network, with a gorgeous design using best practices of MUI and a well-maintained server-side using Node.js & MongoDB. the best functionality at your side! register for the network, share and like posts, make connects and view the various profile on the network.
### :bangbang: Folder Structure
Wixie code folder structure seperated to client-side and server-side.
```
Wixie-Social-Network/
|- client
|-- src/
|-- components/
|-- scenes/
|-- homePage/
|-- loginPage/
|-- navbar/
|-- profilePage/
|-- widgets/
|-- state/
|- server
|-- controllers/
|-- data/
|-- middleware/
|-- models/
|-- public/assets/
|-- routes/
|-- .env
```
Now, lets dive into both server and client sides folders.
### CLIENT-SIDE
#### components
`FlexBetween.jsx` - `Friend.jsx` - `UserImage.jsx` - `WidgetWrapper.jsx`
This folder contains all the function components, which they're independent and reusable bits of code. They serve the UI (User Interface) of Wixie to avoid unnecessary repetition of the code.
those components are beautiful customized widgets using MUI to describe initial theme for widgets as they're named.
#### scenes
scenes folder seperated by folders such as homePage, loginPage, profilePage, and navbar. each folder, implement the desired UI parts.
also, there is a folder called `widgets`, where you can only find widgets that are reused, mainly for the feed and user profiles.
this department communication with the server-side in order to get access data, along with using React Redux.
#### state
`index.js`
using [createSlice] (reduxjs-toolkit) that accepts an initial state, an object of reducer functions and a [authSlice] that automatically generates action creators and action types that correspond to the reducers and state. specifically, the reducers are `setMode`, `setLogin`, `setLogout`, `SetFriends`, `setPosts`, `setPost`
### SERVER-SIDE
#### conrtollers
`auth.js` - `posts.js` - `users.js`
`controllers` folder contains JS files for the controllers in order to handle users request and return a response.
`auth` controller consist Register & Login controllers that using JWT (JSON Web Token) in order to defines a compact and self-contained way for securely transmtting information parties as a JSON object (digitally signed) and salting technique to encrypt user password using random salt provided by bcrypt.
#### data
`index.js`
constant array of fake users & data. this data can be used to verify the integrity of the application. In the case of adding the information, it must be added only once - you can find in `index.js` file in the [mongoose.connect] command the insertion of the data, remove the comments accordingly. After running the app, return the comments because when re-running it can cause a mess in the database. in such a case, drop the collections that created in your DB and repeat the process.
A reference to thus snippet (`index.js` file):
```javascript
// add data one time
User.insertMany(users);
Post.insertMany(posts);
```
#### middleware
JWT provides a JSON Web Token (JWT) authentication middleware.
`auth.js` file in middleware folder contain [verifyToken] async function that sends identifying credentials to the middleware and gets back a JWT with appropriate permissions.
in the `.env` file you need to add `JWT_SECRET` (individual user envorinment variable) with a secret string as you wish, keep it to yourself.
#### models
`Post.js` - `User.js`
`models` folder consists model class files for `Post` and `User` by[mongoose.Schema] which defines the structure of the document, default values, validators, etc., whereas a Mongoose model providers an interface to the data base for creating, querying, updating, deleting records.
#### routes
`auth.js` - `posts.js` - `users.js`
`routes` folder files refers to how an application's endpoint (URIs) respond to client requests make the path mapping using Express.js with [express.Router].
### :key: Environment Variables
In order to use Wixie you have to add the following environment variable to your .env file
```env
MONGO_URL=
JWT_SECRET=
PORT=
```
### :space_invader: Tech Stack
and much more..
## :toolbox: Getting Started
### :gear: Installation
#### Step 0:
Note :bangbang: the application uses a MongoDB database, therefore, you need to create a database and connect it to the application, fo this, change the `MONGO_URL` environment variable in `.env` file.
If everything is done correctly, when the server is running, you will expect a message: ```server is running on port: ```
otherwise, you will receive a message that the connection failed and the corresponding error.
deductively, react-app runs on port `3000`, so make sure your server run on another port for example `3001`. it also need to be set in `.env` file at `PORT` variable.
Also, in production, change the server address in the designated places.
#### Step 1:
Download or clone this repo by using the link below:
```bash
https://github.com/ladunjexa/Wixie-Social-Network
```
#### Step 2:
Wixie using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in consle
```bash
node -v
```
### Step 3:
Go to root folder and execute the following command in console to get nodemon command line tool: (helps with the speedy development of Node. js applications)
```bash
npm install -g nodemon
```
### Step 4:
In both folders (`client` / `server`) execute the following command to get the required packages:
```bash
npm install
```
### Step 5:
Go to `server` folder and execute the following command in order to run our back-end server:
```bash
node index.js
```
### Step 6:
Go to `client` folder and execute the following command in order to run our front-end app:
```bash
npm start
```
## :information_source: Data Model
"data model" refers to the way data is organized documented, and defined within a database.
it so, data model are visual representations of an enterprise's data elements (including their types) and the relations between them.
Below is the Data Model for wixie.
If you want to get an impression of WIXIE, you can register or log in using the following demo user details:
```json
Email=admin@mail.com
Password=12344321
```
## :milky_way: Media
### LOGIN & REGISTER ACTIVITIES
### USER PROFILE ACTIVITY
### FEED ACTIVITY
## :wave: Contributing
Contributions are always welcome!
See [`contributing.md`](https://contributing.md/) for ways to get started.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## :warning: License
Distributed under the MIT License. See [LICENSE.txt](https://github.com/ladunjexa/Wixie-Social-Network/blob/main/LICENSE) for more information.
## :handshake: Contact
Liron Abutbul - [@lironabutbul6](https://twitter.com/lironabutbul6) - [@ladunjexa](https://t.me/ladunjexa)
Project Link: [https://github.com/ladunjexa/Wixie-Social-Network](https://github.com/ladunjexa/Wixie-Social-Network)
## :gem: Acknowledgements
This section used to mention useful resources and libraries (packages) that used in Wixie Social Network application project.
- [Material UI](https://mui.com/material-ui/getting-started/installation/)
- [Redux Toolkit](https://redux-toolkit.js.org/introduction/getting-started)
- [React Router](https://reactrouter.com/en/v6.3.0/getting-started/installation)
- [Redux Persist](https://github.com/rt2zz/redux-persist)
- [React Dropzone](https://react-dropzone.js.org/)
- [Node.js](https://nodejs.org/en/download/)
- [Nodemon](https://github.com/remy/nodemon)
- [NPX](https://www.npmjs.com/package/npx)
- [dotenv](https://github.com/motdotla/dotenv)
- [MongoDB](https://www.mongodb.com/)
- [mongoose](https://github.com/Automattic/mongoose)
- [JWT](https://github.com/auth0/node-jsonwebtoken)
- [Multer](https://github.com/expressjs/multer)
- [Multer-GridFS-Storage](https://github.com/devconcept/multer-gridfs-storage)
- [Formik](https://formik.org/docs/overview)
- [Yup](https://github.com/jquense/yup)
- [Google Fonts](https://fonts.google.com/)
- [EDROH](https://www.youtube.com/c/edrohdev)
