Code Monkey home page Code Monkey logo

blogman's Introduction

BlogMan

About

"Publish your words in your way! Whether you'd like to share your knowledge, experiences or the latest news, publish your own articles in a unique and smart way"

BlogMan is a new social blogging platform where anybody can share their views and read other's opinion related to any topic. It is a way to connect with people and to know how the world is thinking. BlogMan is created using the MongoDB, Express, React and NodeJS (MERN Stack).

Built With

MongoDB - Database
Express - NodeJS Framework
React - Frontend
NodeJS - Backend
CKEditor - Creating blogs

Build Setup

In the project directory BlogMan/front-end, run this command to install dependencies:

npm install

In order to run the application:

npm start

Runs the app in the development mode.

Open http://localhost:5000 to view it in the browser.

The page will reload automatically if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

MongoDB Connection (Database)

Open "back-end/.env" to setup MongoDB environment and add your MongoDB URI, local or Atlas, client-id, client-secret and Youtube API key.
Console will display "Mongoose connected" if there are no issues with the connection. If there is any pertaining issue, console displays "Mongoose connection failed".

Running the entire app on docker

  • The docker files have been written for both the frontend and backend(inside the respective folders)
  • Make sure you have docker and docker-compose installed on your system.
  • Go to the root directory of the project.
  • Run docker-compose up --build.
  • This will build the individual docker images from within the respective folders and create the containers.
  • The docker-compose file acts as a manager, for the individual docker files. It decides and configures things like which container runs on which port, the names of the containers and even the starting order of the docker containers.
  • We use docker containers to run/develop our apps because they are light weight and while using docker containers, we don't need to have the respective tech-stack(like, npm, angular-cli, react-cli) locally installed on our system. This gives developers the ability to continue to develop projects irrespective of the platforms they are working on.
  • NOTE: The MongoDB database for this project is running and maintained on Mongo Atlas as of now. Since multiple people have contributed to this project, before starting the apps, make sure the required API Keys are in-place(because some API keys are defined inside the respective folders - for both frontend and backend, and not through docker environment variables), otherwise there may be some weird errors.
  • Should you run into some error, please refer the official documentation here

Prerequisites to contribute

  • Basic knowledge of programming
  • Ability to use Git and Github
  • Working knowledge of Flutter is preferable
  • UI/UX skills are appreciable but not mandatory

Contributing

How to contribute:

GSSOC'20

1. Fork this repository.

2. Clone the forked repository.

git clone https://github.com/<your-github-username>/BlogMan

3. Navigate to the project directory.

cd girlscript_app

4. Create a new branch.

git checkout -b <your_branch_name>

5. Make changes in source code.

6. Commit your changes.

  git add .
  git commit -m "<your_commit_message>"

7. Push your local branch to the remote repository.

git push -u origin <your_branch_name>

8. Create a Pull Request!

Congratulations! Sit and relax, you've made your contribution to BlogMan project.

Contribution Guidelines

  • Write clear meaningful git commit messages (Do read this).

  • Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. (Check this for more info)

  • When you make very very minor changes to a PR of yours (like for example fixing a text in button, minor changes requested by reviewers) make sure you squash your commits afterward so that you don't have an absurd number of commits for a very small fix. (Learn how to squash at here)

  • When you're submitting a PR for a UI-related issue, it would be really awesome if you add a screenshot of your change or a link to a deployment where it can be tested out along with your PR. It makes it very easy for the reviewers and you'll also get reviews quicker.

  • Please follow the PR Template to create the PR.

  • Always create PR to develop branch.

  • Please read our Code of Conduct.

Guidelines while working on API

We have layed out some guidelines for error handling on the backend. Kindly read and implement it when you're working on any API.

#96 (comment)

Owner

Avijit Das

Mentors

Avijit Das
Rajat Upadhyay
Pratham Dogra
Ayushi Sanjeev Kumar

Keep Contributing !! We love your input !!

blogman's People

Contributors

adavijit avatar aditya20t avatar ankita1811 avatar anmolkaur18 avatar ashishnagpal2498 avatar basilleaf24 avatar bhuwanchandra avatar chetanjain10 avatar dependabot[bot] avatar endowmissy avatar frozengirl-spd avatar guptavarun619 avatar ignoreintuition avatar imabp avatar irshadjsr21 avatar lakshyajit165 avatar maheshschand avatar nvs16 avatar prathamdogra avatar rajatmw1999 avatar riajha02 avatar rukmini-meda avatar sachindrafernando avatar satyam3976 avatar schitiz avatar shreyakapoor08 avatar simranaggarwal1999 avatar swarnimashukla avatar taran1515 avatar utkzas avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

blogman's Issues

Create wireframe for a particular question and its answer

In the QnA section, when a user clicks on a particular question, he will be directed to a page dedicated particulary to that question and all its answers till date. create a simple and easy to use wireframe.

  1. Add question
  2. Add topic tags to question
  3. Give answer
  4. Like answer
  5. Leave comment
  6. Other similar question
  7. People interested in question

Also add anything you think are needed to be added.

Create wireframe for books suggestions.

BlogMan is all about sharing knowledge. It will have a books suggestions section.

Create a simple wireframe for this page.. it will display:

  1. a list of books
  2. name of book, author, pic, stars, genre, small description.
  3. add to favorite button for every book in list.
  4. anything that comes to your mind and you think is needed on this page can be added.

Create wireframe for quiz section - MCQ

BlogMan will have a quiz section where various types of questions will be asked like mcqs, subjective, numericals etc.

Create wireframe for MCQ questions.

MongoDB connection issue (gssoc 20)

Participants are getting error messages and not able to connect to the mongoDB server. Fix the issue. Also add local as well as an online cluster connection. As of now, just let the statement with the local connection work and comment out the connection to the online cluster.
Whoever who will take up this issue is supposed to:

  1. Create an online cluster with their personal account on MongoDB.
  2. Connect with the BlogMan project.
  3. Comment out the connection of the cluster and as of now, just let the application connect with the MongoDB on the local machine.

Recommendation algorithm

Create a recommendation algorithm to recommend a user about new posts and new courses available based on their previous history of interests, likes, comments and their skills. The new suggested posts are supposed to be present in the database and the users history and their previous likes are also supposed to be stored in DB.

Implement login functionality

Implement login functionality using MongoDB and express
Create a folder backend inside root directory if not available

Create wireframe for a particular book

BlogMan is all about sharing knowledge. It will have a books suggestions section.

Create a simple wireframe for the page dedicated to a particular book.. it will display:

name of book, author, pic, stars, genre, description.
add to favorite button for book
anything that comes to your mind and you think is needed on this page can be added.

BlogMan dark theme 2

The blogman website is not completed yet. Before its completion, a dark theme needs to be ready to apply to it.
Make use of your own dummy page and name it as "dark_theme_2.html".

Include, text, image, icons, emojis etc to it and give it a really cool dark theme.
This page will later on be used to add the dark theme to the complete website.
Create a separate CSS file and a separate folder for this theme.

Along with front-end and back-end, make a folder dark-theme and include the css and html file there before commiting.

Compile a dark theme for BlogMan

The blogman website is not completed yet. Before its completion, a dark theme needs to be ready to apply to it.
Make use of your own dummy page and name it as "dark_theme.html".
Include, text, image, icons, emojis etc to it and give it a really cool dark theme.
This page will later on be used to add the dark theme to the complete website.
Create a separate CSS file and a separate folder for this theme.

Along with front-end and back-end, make a folder dark-theme and include the css and html file there before commiting.

Design and create a user profile component

Design and create a user profile component inside the front-end folder using React

Directions

  1. User profile picture, name and details should be there
  2. User's profile picture changing functionality should be there
  3. Refer the screenshot below

twitter_profile_card

Attach a screenshot while sending a PR

Create wireframe for Our Team section.

BlogMan will have a Our Team section displaying the name, pic, role and a small description of the team behind blogman.
Create a simple and easy to navigate wireframe for that.

Make API calls to Udacity API

udacity provides API to fetch the data of particular courses based on a search query parameter.
Make udacity API calls in the back end based on different search criterias like domain(web dev, data science), stack(mern mean, flutter etc), university and authors.
Fetch the JSON data and display it.

Prepare wireframe for Blog Page.

BlogMan is all about blogging. Create a wireframe for a blog page which will have all the basic features of a blog. The topic, content, comments, likes, etc of a article. Try to make it minimilistic and simple.

Create a login-signup component

Create a login-signup component with React.

Working directory is /front-end/

  1. Connect all login signup functionalities with your front-end part
  2. Send a PR with screenshot

Happy Coding :)

Make API call for books list

Search over the internet for free APIs that provide a list of books given a query parameter.

Implement the logic in backend.

Create Routes for login and register.

Since, the UI for and signup page is noe updated. Update the routes in the back end and make the flow as per mentioned.

  1. When user opens website, login page should appear.
  2. If user logs in, go to home page . Otherwise, allow him to go to signup page.
  3. After signing up, redirect to home page.

Improving the Login and Signup Page using Material UI

React Ant Design has a vivid collection of components, even more than angular material. It also has notification components (like the ones which show success/error message on completion or failure). I think it would be good to implement all the components using Ant Design as the official docs make them quite easy to implement

Forget password needs to be implemented

Forget password needs to be implemented

  1. You can change the MongoDB models fields if you wish to.
  2. You need to implement a simple password recovery option.
  3. Forgot password form should be connected with the Sign-in form.

If you have any queries feel free to ask me.

Happy coding :)

Design the UI for the Blog Page of BlogMan

After a user logs in using his account, the page with different blog articles should appear. Design that blog Page. The wireframes will be provided in a day or two, until then comment if you are interested.
Also, have a look at the "blog post mongodb model" to see all the fields that you have to include while designing.

Create USERS model in MongoDB

Create a mongoDB model for the users using the course comparison and blog website.
It should include the following fields :

  1. Name
  2. Email
  3. Interests
  4. Posts liked
  5. Comments
  6. Skills
  7. College
  8. Search interests

Ideas Suggestion

For those of you, not into coding too much. Here is an issue.

Come up with new, exciting, and innovative ideas for a Blog and Education website like BlogMan.
Let your imagination run wild and far away.

You can do research on internet, search through similar sites etc.
We want innovative ideas.

Create a separate folder in the main code along with backend and frontend folder. Name it "New_Ideas" and put your ideas in a text file in that folder.

Design and create a navigation bar component

You need to make a navigation bar component (Refer the screenshot below)

  1. You can find a simple navbar inside the home folder
  2. You need to make a navbar component and replace that navbar component with the previous one.
  3. You may create a parent component and render the navbar component there.
  4. Feel free to ask if you have any queries.

Happy coding :)

image22-1

Create wireframe for a USER profile

Create a simple and easy to use wireframe for a user profile. Like a instagram or facebook profile, it should have all links and details of users. A user profile for a user on Linkedin should be a good example of what is expected.

Create wireframes for QnA section.

A QnA section like that of Stackoverflow has to be made in the website. Create a simple and easy to use wireframe.

  1. Add question
  2. Add topic tags to question
  3. Give answer
  4. Like answer
  5. Leave comment
  6. Other similar question
  7. People interested in question
  8. Anything else you need to add according to you.

This wireframe should show all the questions and a short answer(100 words only) to each question.

A separate wireframe will be created dedicated to one question through another question.

After signing up Log In page should be opened.

I'm submitting a

  • bug report.
  • feature request.

Current Behaviour:

After a user registers, he gets directly logged in to the home page.
Login

Expected Behaviour:

After the user registers he/she should see the login page.
login

Update ReadMe

Read through the issues that have been created until now and update the readme file with the new features that are being added to the blogMan. Specify the features that blogMan has. read the features from issues.

BlogMan dark theme 3

The blogman website is not completed yet. Before its completion, a dark theme needs to be ready to apply to it.
Make use of your own dummy page and name it as "dark_theme_3.html".

Include, text, image, icons, emojis etc to it and give it a really cool dark theme.
This page will later on be used to add the dark theme to the complete website.
Create a separate CSS file and a separate folder for this theme.

Along with front-end and back-end, make a folder dark-theme and include the css and html file there before commiting.

Design the Readme.md file

BlogMan is a social blogging platform, where anybody can come up to share their views and also can read other's opinion related to any topic.
BlogMan is a way to connect with people and to know how the world is thinking.
We are using MERN for this

So design Readme file accordingly.

Add MailChimp Newsletter service

The front end for the newsletter sign up is not created yet. So, create a dummy page for signing up to newsletter and connect it to a mailchimp email list.

Make API calls to Udemy API

udemy.com provides API to fetch the data of particular courses based on a search query parameter.
Make UDEMY API calls in the back end based on different search criterias like domain(web dev, data science), stack(mern mean, flutter etc) and authors.
Fetch the JSON data and display it.

Create wireframe for a particular Online course details

BlogMan will have a section where users will be able to compare online coding courses all across the internet and rank them according to the popularity of course. The courses will be displayed rank wise.

Take reference from https://hackr.io/ and create a wireframe for a particular course.

After the comparison results are displayed, if the user clicks on one particular course, all the details of the course will be displayed. ALL details. Create that wireframe for that particular course.
Take reference from hackr.io to see what you might want to include.

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.