Git Product home page Git Product logo

purnima143 / desgem-design-portal Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 1.09 MB

A web app which connects authenticated user, allows to post their design shots and allow them to like-unlike and give feedback on UI design shots.

Home Page: https://desgemweb.herokuapp.com/

JavaScript 93.08% HTML 3.04% CSS 3.88%
reactjs nodejs css javascript mongodb mern-stack mern express jquery webdevelopment ux-ui

desgem-design-portal's Introduction

deslogo

forthebadge forthebadge forthebadge forthebadge

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: JavaScript

  • Tools & Technologies: React MongoDB Express.js NodeJS

  • Project Management Tools: Trello GitHub Git Markdown

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.

image image

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

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

image

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

image

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

image

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

image

  • MongoDB image image

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/)_
  1. Install the dependencies by running

    npm install
    
  2. 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.

desgem-design-portal's People

Contributors

purnima143 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.