Git Product home page Git Product logo

blogging-site's Introduction

Image

Blogging Website using pure HTML, CSS and JS.

This project is a mini version of a working blogging website. This project is done by using only HTML, CSS and JS. This is a node.js app. And using firebase as its databse. Features of this Site :-

  1. Dynamic Blog pages.
  2. Have a dedicated editor for blogs.
  3. You can add/make as many blogs you want.
  4. You can add Headings, paragraphs, and Images to the blog post.
  5. Have read more blogs section also.

You can checkout it coding tutorial here.

Installation Guide.

Once you forked this repo. Make sure to run npm install command inside the folder to install all the package.

After installing packages. You must go to your firbase console and make a project. Copy project credentials and paste it to "firebase.js" file. Otherwise you'll not be able to access database.

blogging-site's People

Contributors

kunaal438 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  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blogging-site's Issues

image upload

the image couldnt be uploaded i tried to work on it but i cant do it.

Upon proper completion and installation,

The upload image function is having trouble fetching, some type of problem with the async that I've been trying to debug but can't figure out where the issue is at, please fix the fetch error.

editor.js:26
Uncaught (in promise) TypeError: Failed to fetch

New Firestore

I figure this is a long shot, but I'm trying to incorporate your blog template into an Angular webapp. I'm having an issue where the .post and .collection methods aren't appearing in Firestore. Ref:

publishBtn.addEventListener('click', () => {
if(articleField.value.length && postTitleField.value.length){
// generating id
let letters = 'abcdefghijklmnopqrstuvwxyz';
let postTitle = postTitleField.value.split(" ").join("-");
let id = '';
for(let i = 0; i < 4; i++){
id += letters[Math.floor(Math.random() * letters.length)];
}
// setting up docName
let docName = ${postTitle}-${id};
let date = new Date(); // for published at info

      //access firstore with db variable;
      db.collection("posts").doc(docName).set({ <-the .collection at this instance is throwing a TS2339 error.
          title: postTitleField.value,
          article: articleField.value,
          bannerImage: bannerPath,
          publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
      })
      .then(() => {
          location.href = `/${docName}`;
      })
      .catch((err) => {
          console.error(err);
      })
  }

})

I was curious if you had run into this at all and knew a solution. My imports for this component are:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import 'firebase/compat/functions'
import 'firebase/compat/firestore'
import 'firebase/compat/database'
import { environment } from 'src/environments/environment.prod';

I am not able to upload an image or a cover image or the blog even after importing all the necessary modules. I have watched your video and I have followed all steps carefully .In short, the whole project is not working. I think there's some issue in the firebase code which I'm providing for reference: Please solve it as soon as possible

// For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyA_YSMfzvPHK_1UAeZjlcyUnoMmBntr3XQ", authDomain: "blog-77507.firebaseapp.com", projectId: "blog-77507", storageBucket: "blog-77507.appspot.com", messagingSenderId: "547768921904", appId: "1:547768921904:web:83fcb30dfa1f39235d62f5", measurementId: "G-8R4QGVG1CG" };

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.