Today Developers around the world are making efforts to enhance user experience of using application as well as to enhance the developer’s workflow of designing applications to deliver projects and rollout change requests under strict timeline. Stacks can be used to build web applications in the shortest span of time. The stacks used in web development are basically the response of software engineers to current demands. They have essentially adopted pre-existing frameworks (including JavaScript) to make their lives easier.

Problem statement😟

• This project is to create design portal with a server and users to enable the users to see each other’s design work.
• To develop a platform where people can post their design shots and other users can likeunlike the post and can make the comment on the post.
• The project has user profile where we can see the number of design shots posted by the user,number of followers and number of people we follow.
• This project can play an important role in design creative field where students can get inspiration from other designer’s designs.

Solution 💡

DESGEM is a self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform and is one of the platforms for designers to share their work online. We’re on a mission to build the world’s best community for creatives to share, grow, and get hired. Desgem is the go-to resource for discovering and connecting with designers and creative talent around the globe.

Project Objective

• Get Feedback: To develop a feedback on the designs, so that they can improve on their designing skills.
• User friendliness: The project should be very easy to use enabling even a novice person to use it.

Areas of Collaboration 👨‍🏭

Project Managers, Developers, and Designers would be collaborating on various domains like:

• UI Prototyping

• Front-End Development with ReactJS

• Developing Backend APIs with NodeJS and MongoDB

• Working on a NoSQL Database Management System

• Working on a User-Experience rich platform for a Social Cause

This would be an enriching experience for all Student Developers, Project Managers, and Designers.

Technology Stack 🛠️

• Coding Languages:

• Tools & Technologies:

• Project Management Tools:

Flow of the site 💻

Below is a basic idea as to how the website works.

• Login & Signup screen: For authentication we build a login and signup screen. After signin we redirect to home page and then you can log out also.

• User Profile Page: Here we can see the number of shots you posted and no. of followers and following you have. Also we can update the your profile pic.

We can visit other user’s profile and can follow unfollow his/her profile.

• Create design shots: Here we can upload our own design shots and let others give feedback on your designs.

• Home page or feed page: Here, we can see the posts posted by other designers and also like-unlike their posts. We can see other’s comment on the design shots and also make the comment on the posts.

• Following shots: This is the page where you can the post posted by your followings.

• MongoDB

Setup Guidelines

Clone the repository -

git clone https://github.com/purnima143/Desgem_Design-Portal.git

Backend

1. Run cd server on your CLI.

2. Create a .env file and paste the MONGO_URL, node environment and email for nodemailer in the given format

   MONGO_URL = <your_url>
   NODE_ENV = development
   USER_MAIL=<Enter your mail-id from where you want to send the mails>
   MAIL_PASSWORD=<password of the entered mail-id for the authentication>
   

Note: See the .env.example file for further clarity

_NOTE: To get the MONGO_URL, take a look at this article for reference [Connection String URI Format](https://docs.mongodb.com/manual/reference/connection-string/)_

3. Install the dependencies by running

   npm install
   

4. Run the server

   npm run server
   

   Link for the screenshots, how to setup backend locally are kept in assets->backend folder.

Frontend

1. Run cd client on your CLI.

2. Install the dependencies by running

   npm install
   

3. Run the server

   npm start
   

NOTE: To run the Frontend side of the application is recommended to run the backend server too.

Start Frontend & Backend simultaneously

1. Navigate to the root folder i.e. Kurakoo.git

2. Install the dependencies by running

   npm install
   

3. Start Frontend & Backend simultaneously

   npm run dev
   

Conclusion 😊

Desgem posts and ads are key ways to drive traffic to any designer or developers website as sharing content is a great way to get readers as soon as you publish a new post. People talking about the designs on the portal, helps designers in building brand awareness and credibility. Designers have to engage themselves for their customers and followers to be engaged by responding to comments and questions which can help in boosting up sales. Monitoring the competition on this portal will be easy and will increase the awareness of the developer hence aiding them in self- improvement at every stage.In conclusion, Desgem is a portal the enhances the digital awareness of the people and provides them will appreciable opportunities.