Swirk

Project Idea

The project idea was inspired by Twitter.

Table of Contents

• About this Project
• How to run the app on your computer
• Future Features
• Project Structure
• Tools
• Application Pictures

About this project

Swirk is a social meadia project and its similar to Twitter. It is a place where people can share their opinion on many different topics and ideas. They have full access to all of the resources on the server and can use many functionalities related to posting content online.

How to run the app on your computer

1. You can download the project ZIP file or you can clone the repository directly.
2. Open the project with IDE/Code Editor.
3. Open terminal with Ctrl + J.
4. Navigate to swirk folder with cd swirk.
5. Then navigate to client folder with cd client.
6. Type npm i to install all modules that are listed on package.json file and their dependencies.
7. Type npm start to run the project in the browser. It will start on http://localhost:3000, but you can change it to another if necessary. Type y to do it.
8. Do the steps 4, 5 and 6 with the server folder.
9. Explore Swirk.
10. Share your opinion and thoughts on Swirk.

Future Features

• Chat

  • send message to user

• Discussions

  • start discussion
  • invite users to discussion

Project Structure

• Client

  • api - for all of the project api requests
  • assets - for project assets
  • components - all of the components used in multiple places
  • constants - all of the project constant variables
  • contexts - all of the project contexts
  • features - all of the project features (authentication, posts, genres and profile)
  • hooks - all of the custom hooks
  • layouts - for every partial code used by many components
  • lib - for 3rd party libraries and their configuration files
  • pages - for all of the application pages that does not store complicated logic
  • services - for each application service and its requests
  • utils - that contains functions used in multiple files

• Server

  • config - configuring the application
  • constants - all of the project constant variables
  • controllers - folder, where we can separate the route and the controller function
  • models - stores database schemas
  • routes - contains various application routes

Tools

• React
• TypeScript
• React Router
• Firebase
• Cyclic
• Node
• Express
• nodemon
• MongoDB
• Mongoose
• jwt
• bcrypt
• dotenv

Application Pictures