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

📔 Table of Contents

• About the Project
  • Folder Structure
  • Environment Variables
  • Tech Stack
• Getting Started
  • Installation
  • Run Locally
• Data Model
• Media
• Contributing
• License
• Contact
• Acknowledgements

🌟 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.

‼️ 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):

  // 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].

🔑 Environment Variables

In order to use Wixie you have to add the following environment variable to your .env file

MONGO_URL=<MONGO_URL>
JWT_SECRET=<SECRET>
PORT=<SERVER_PORT>

👾 Tech Stack

and much more..

(back to top)

🧰 Getting Started

⚙️ Installation

Step 0:

Note ‼️ 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: <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:

 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

  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)

  npm install -g nodemon

Step 4:

In both folders (client / server) execute the following command to get the required packages:

  npm install

Step 5:

Go to server folder and execute the following command in order to run our back-end server:

  node index.js

Step 6:

Go to client folder and execute the following command in order to run our front-end app:

  npm start

(back to top)

ℹ️ 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:

Email=admin@mail.com 
Password=12344321

(back to top)

🌌 Media

LOGIN & REGISTER ACTIVITIES

USER PROFILE ACTIVITY

FEED ACTIVITY

(back to top)

👋 Contributing

Contributions are always welcome!

See 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

(back to top)

⚠️ License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

🤝 Contact

Liron Abutbul - @lironabutbul6 - @ladunjexa

Project Link: https://github.com/ladunjexa/Wixie-Social-Network

(back to top)

💎 Acknowledgements

This section used to mention useful resources and libraries (packages) that used in Wixie Social Network application project.

• Material UI
• Redux Toolkit
• React Router
• Redux Persist
• React Dropzone
• Node.js
• Nodemon
• NPX
• dotenv
• MongoDB
• mongoose
• JWT
• Multer
• Multer-GridFS-Storage
• Formik
• Yup
• Google Fonts
• EDROH

(back to top)