mizanwdev/complete-website-server

Assignment - 11 - Complete Website Client

Github Repo Link : https://github.com/Porgramming-Hero-web-course/complete-website-server-Mizzan

Live Site Link ( Firebase) :

Server Site Link ( Heroku ) :

Requirements

Main Part Instruction:

1. হোম পেইজ এর মিনিমাম পাঁচটা সেকশন থাকতে হবে। টপ ব্যানার, সার্ভিস, প্রজেক্টস বা অন্য কিছু একটা (তোমার ওয়েবসাইট এর সাথে মিল আছে এমন কিছু একটা), রিভিউ (টেস্টিমোনিয়াল) সেকশন, ফুটার থাকতে হবে। আমাদের ডিজাইন এ একটা কন্টাক্ট এর একটা ফর্ম দেয়া আছে। সেটার ডিজাইন যোগ করা বা ইমপ্লিমেন্ট করা অপশনাল। তুমি চাইলে করতে পারো। না করলেও কোন মার্ক্স্ কাটা যাবে না। ডিজাইন আমাদের দেয়া ডিজাইন সাথে মিল হবে না একদম। অর্থাৎ তুমি সম্পূর্ণ তোমার মতো করে ডিজাইন করবে। তোমার মতো করে কালার, সাইজ, শেইপ, ইমেজ চেইঞ্জ করবে। তবে দেখতে একটু পলিশড মনে হবে। ডিজাইন পারফেক্ট হওয়া লাগবে না। তবে ৯০% ভালো হতে হবে। হোম পেইজ ডিজাইন করতে গেলে প্রথমে চাইলে সার্ভিস এবং review এর ডাটা ফেইক ডাটা দিয়ে করে ফেলতে পারো। তবে পরে কিন্তু এইসব ডাটা ডাটাবেজ থেকে লোড করতে হবে। যাতে ফিউচারে কোন সার্ভিস বা কোন রিভিউ যোগ করলে সেটা ডাইনামিকভাবে হোম পেইজে দেখা যায়। সার্ভিস এবং রিভিউ (টেস্টিমোনিয়াল) ছাড়া বাকি সব স্ট্যাটিক হবে।

• Done

2. কোন একজন ইউজার হোম পেইজ এর কোন একটা সার্ভিস এ ক্লিক করলে লগইন পেইজে নিয়ে যাবে (যদি লগইন করা না থাকে)। লগইন করার পর সে সেই সার্ভিস এর অর্ডার করতে পারবে। অর্ডার প্লেস করার সময় তাকে ক্রেডিট কার্ড দিয়ে দেয়ার একটা ফর্ম থাকবে। আপাতত টেস্ট কার্ড দিয়ে কাজ হলেই হবে। হোম পেইজে যে সার্ভিস এ ক্লিক করে আসবে সেটার নাম এবং দাম দেখাবে। যেকোন একটা সিস্টেম এ লগইন করতে পারলেই হবে। হয় গুগল, বা ফেইসবুক বা অন্য কোন ভাবে। আমরা আমাদের ডিজাইনে ইমেইল দিয়ে একাউন্ট ক্রিয়েট করার একটা পেইজ দিয়েছি। সেটা ইমপ্লিমেন্ট করা অপশনাল। করলে সেটার জন্য বাড়তি কোন মার্ক্স্ থাকবে না।

• Done

3. একজন কাস্টমার লগইন করা থাকলে সে পর ড্যাশবোর্ড/অ্যাডমিন প্যানেল এ যাবে।

• Done

4. 3.1 সেখানে সে তার অর্ডার (আগে যত অর্ডার) এর কারেন্ট স্ট্যাটাস দেখতে পারবে। স্টেটাস দেখানোর সিস্টেম তুমি তোমার মতো করে ডিজাইন করতে পারো।

• Done

5. 3.2 ইউজার চাইলে কোম্পানিকে রিভিউ দিতে পারবে। কেউ রিভিউ দিলে সেটা হোম পেইজের রিভিউ সেকশনে দেখাবে। অর্থাৎ হোম পেইজের রিভিউগুলো ডাটা ডাটাবেজ থেকে লোড করতে হবে। যাতে কেউ নতুন রিভিউ দিলে সেটা হোম পেইজে চলে আসে।

• Done

6. একজন এডমিন যদি লগইন বাটনে ক্লিক করে লগইন করে। তাহলে সে, সেইম ড্যাশবোর্ড এ যাবে। তবে তার জন্য অপশন ডিফারেন্ট হবে। ৪.১ এডমিন ঢুকলে যত ইউজার অর্ডার প্লেস করছে সব দেখতে পারবে। সে চাইলে কোন একটা অর্ডারের স্ট্যাটাস চেইঞ্জ করতে পারে। তিনটা স্ট্যাটাস থাকবে (pending, on going, done) সেখানে আমরা ড্রপ ডাউন অপশন দিছি। তুমি চাইলে বাটন বা আইকন বাটন দিতে পারো।

• • Done but could not perform the Admin panel properley...

7. 4.2 এডমিন চাইলে নতুন সার্ভিস যোগ করতে পারবে। আর সার্ভিস যোগ করলে সেই সার্ভিস হোম পেইজে দেখাবে। ছবি তুমি কোথায় কিভাবে হোস্ট করতেছো। বা রাখতেছো সেটা নিয়ে আমাদের কোন মাথা ব্যাথা নাই। তুমি চাইলে imgbb, বা mongodb বা অন্য কোথাও রাখতে পারো।

• Done

4. 4.3 এডমিন চাইলে নতুন কোন ইমেইল এড্রেস দিয়ে কাউকে এডমিন বানিয়ে দিতে পারবে।

• could not perform the Admin panel properley

4. 4.4 নামে একটা সিম্পল পেইজ তোমাকে বানাতে হবে। যেটার ডিজাইন আমরা দিয়ে দিচ্ছি না। তুমি তোমার মতো করে একটা ডিজাইন করবে। এই পেইজে দেখাবে। যত সার্ভিস যোগ করা হয়েছে সবগুলা এইখানে দেখাবে। এবং চাইলে একজন এডমিন কোন একটা সার্ভিসকে ডিলিট করে দিতে পারে। যদি ডিলিট করে দেয়। তাহলে সেই সার্ভিস আর হোম পেইজে দেখাবে না।

• Done

5. সবকিছু ১০০% করতে পারলে অবশ্যই ভালো। তবে ১০০% করতেই হবে এমন কোন কথা নাই। কোন একটা পার্ট একটু কম করলে বা দরকার হলে দুই-একটা অংশ ছেড়ে দিলে। তবে যেটাই করো না কেন। কোন একটা জিনিসযের জন্য দুই ঘন্টার বেশি আটকে থেকো না। বেশি সময় আটকে থাকলে সামনে গিয়ে আর সময় পাবে না।

• could not finished the projects 100% as there was several new concepts including the admin panel

Bonus Part:

1. হোম পেইজে যেকোন সার্ভিসের আইকন এর উপরে মাউস নিলে বা ক্লিক করলে সেখানে কিছু একটা এনিমেশন হবে। কি এনিমেশন হবে সেটা তুমি বের করবা। সেটা কিভাবে করতে হবে। সেটাও তুমি বের করবে। ইনডাইরেক্ট কিছু হিন্টস ৫২_৫-৭ ভিডিওতে দেয়া আছে। তবে সেভাবে করতে হবে এমন কোন কথা নাই। তুমি চাইলে নরমাল css দিয়েও করতে পারো।

• Done

2. হোম পেইজে তুমি তোমার মতো করে একটা জিনিস বা একটা সেকশন এ যোগ করবে। সেখানে কি থাকবে আমরা সেটা বলে দিবো না। তুমি তোমার মতো করে বের করে সেটা যোগ করবে। এই কাজটা তুমি আগেও করছিলা। তাই এইটা এখন করা আর কোন সমস্যাই হবে না।

• Done

3. environment ভেরিয়েবল ব্যবহার করলে। অন্তত সার্ভার সাইডের জন্য যদি .env ফাইল ইউজ করো এবং .gitignore ফাইল ইউজ করো। তাহলে তোমাকে বোনাস মার্ক্স্ দেয়া হবে।

• • Done

4. কোড একটু ক্লিনার হতে হবে। ভেরিয়েবল, props এবং কম্পোনেন্ট এর নাম, API এর নাম একটু মিনিংফুল হতে হবে। অযথাই কোন কম্পোনেন্ট কে বিশাল বানানো যাবে না। বা কমপ্লেক্স করে ফেলা যাবে না। আবার অনেক বেশি সেইম কোড রিপিট করা যাবে না। আলাদা কম্পোনেন্ট ইউজ করতে হবে।

• • Done

5. ওয়েবসাইট হালকা হলেও রেস্পন্সিভ হতে হবে। মিনিমাম একটা ডেস্কটপ ভার্সন আর মোবাইল ভার্সন হতে হবে। অন্য সব পেইজ না পারলেও অন্তত হোম পেইজটা রেস্পন্সিভ করতে হবে।

• Done ( Fully Responsive )

6. Read me নামে একটা ফাইল থাকে সব ওয়েব গিটহাব রিপোজিটরি এর মধ্যে। সেখানে তুমি চাইলে অনেক তথ্য যোগ থাকতে পারে। তাই তোমার রিপো এর মধ্যে Read me ফাইল এর মধ্যে যা যা আছে সেগুলা রিমুভ করে দাও। তারপর তোমার ওয়েবসাইট এর নাম, ওয়েবসাইট এ কি কি জিনিস আছে (অর্থাৎ কি কি ফিচার আছে সেটা নিয়ে মিনিমাম দুই লাইন) লিখে দাও। আর তোমার লাইভ ওয়েবসাইট এর লিংক পারলে ReadMe ফাইল এর মধ্যে দাও। না পারলে রিপো এর সেটিংস বা about এর কোন জায়গায় লিংক যোগ করে দাও। দরকার হলে গুগলে সার্চ দিয়ে দেখো Readme ফাইল কিভাবে এডিট করতে হয়।

• Done

7. এডমিন প্যানেল এর লিমিটেড একসেস এর ফাংশনালি চেক করার জন্য তোমরা programminghero001@gmail.com কে এডমিন হিসেবে তোমাদের ডাটাবেজ এ যোগ করে দিও। তাহলে আমরা যারা এসাইনমেন্ট দেখবো তারা এই ইমেইল দিয়ে সেই ফাংশনালিটি চেক করে ফেলবো। একান্তই যোগ করতে না পারলে আমরা কোড দেখে চেক করে নিতে পারবো।

• could not perform it properly