MathewAddala

selfhosted/MathewAddala

@@ -0,0 +1,91 @@
+గ్లోబ్‌ట్రాటర్
+
+గ్లోబ్‌ట్రాటర్ అనేది React మరియు Three.js తో నిర్మించిన పైరేట్-థీమ్‌డ్ 3D ట్రెజర్ హంట్ గేమ్. ఈ అప్లికేషన్ వినియోగదారులను గ్లోబ్‌ను స్పిన్ చేయడానికి, వాస్తవ-ప్రపంచ స్థానాలను కనుగొనడానికి మరియు నిధిని కనుగొనడానికి లేదా ముందుగా దోచుకున్న ఛెస్ట్‌ను కనుగొనడానికి ఆహ్వానిస్తుంది—అన్నీ మూడు-స్పిన్ పరిమితిలో.
+
+ఈ ప్రాజెక్ట్ డైనమిక్ యూజర్ అనుభవాన్ని సృష్టించడానికి అనేక ఆధునిక వెబ్ టెక్నాలజీలను ఉపయోగించే ఇంటరాక్టివ్, గేమిఫైడ్ వెబ్ అప్లికేషన్‌గా నిర్మించబడింది.
+
+లక్షణాలు
+
+• ఇంటరాక్టివ్ 3D గ్లోబ్: యాదృచ్ఛిక గమ్యస్థానాన్ని ఎంచుకోవడానికి వాస్తవిక 3D గ్లోబ్‌ను స్పిన్ చేయండి (Three.js ద్వారా శక్తివంతం చేయబడింది).
+• శాటిలైట్ మ్యాప్ వ్యూ: అధిక-రిజల్యూషన్ శాటిలైట్ మ్యాప్‌తో మీ గమ్యస్థానానికి స్వయంచాలకంగా ఫ్లై చేసి జూమ్ ఇన్ చేయండి (MapLibre GL JS ద్వారా శక్తివంతం చేయబడింది).
+• డైనమిక్ ట్రెజర్ సిస్టమ్:
+  ◦ వరల్డ్ వండర్స్ వద్ద అధిక-విలువ నిధులను కనుగొనండి.
+  ◦ KL యూనివర్సిటీలో 2000-పాయింట్ జాక్‌పాట్‌ను కనుగొనండి.
+  ◦ అనేక స్థానాలలో హాస్యాస్పదమైన "లూటెడ్" సందేశాలను చూడండి.
+• 3-స్పిన్ పరిమితి: ప్రతి ఆటగాడు అత్యధిక స్కోర్ సాధించడానికి ప్రతి గేమ్‌కు మూడు స్పిన్‌లు పొందుతారు.
+• డైనమిక్ ఇమేజ్ ఫెచింగ్: ట్రెజర్ కార్డ్‌లు ప్రతి స్థానానికి ప్రత్యేక చిత్రాలను కలిగి ఉంటాయి, Pixabay API నుండి డైనమిక్‌గా పొందబడతాయి మరియు బ్రౌజర్ యొక్క లోకల్ స్టోరేజ్‌లో కాష్ చేయబడతాయి.
+• పాలిష్డ్ యానిమేషన్స్: UI వోర్టెక్స్ ట్రాన్సిషన్, స్టాగర్డ్ కార్డ్ రివీల్స్ మరియు స్కోరింగ్‌పై "కాయిన్ బ్లాస్ట్" యానిమేషన్‌ను కలిగి ఉంది (Anime.js ద్వారా శక్తివంతం చేయబడింది).
+• లోకల్ లీడర్‌బోర్డ్: టాప్ కెప్టెన్‌లను ట్రాక్ చేయడానికి అధిక స్కోర్‌లు బ్రౌజర్ యొక్క localStorage లో సేవ్ చేయబడతాయి.
+• సీక్రెట్ మోడల్: హోమ్ స్క్రీన్‌పై దాచిన మోడల్ జాక్‌పాట్ స్థానానికి క్లూను వెల్లడిస్తుంది.
+
+టెక్నాలజీ స్టాక్
+
+• ఫ్రంట్‌ఎండ్: React 19
+• బిల్డ్ టూల్: Vite
+• 3D గ్లోబ్: Three.js
+• 2D మ్యాప్: MapLibre GL JS
+• యానిమేషన్స్: Anime.js
+• ఎక్స్‌టర్నల్ APIs:
+  ◦ Pixabay API (స్థాన చిత్రాల కోసం)
+  ◦ MapTiler API (శాటిలైట్ మ్యాప్ టైల్స్ కోసం)
+
+ప్రారంభం
+
+లోకల్ కాపీని పొందడానికి మరియు రన్ చేయడానికి ఈ సూచనలను అనుసరించండి.
+
+ముందస్తు అవసరాలు
+
+మీ సిస్టమ్‌లో Node.js (ఇందులో npm ఉంటుంది) ఇన్‌స్టాల్ చేయబడి ఉండాలి.
+
+ఇన్‌స్టాలేషన్
+
+రిపోజిటరీని క్లోన్ చేయండి:
+
+git clone https://github.com/MathewAddala/globetrotterv1.git
+
+ప్రాజెక్ట్‌కు నావిగేట్ చేయండి:
+
+cd globetrotterv1/treasure-hunt
+
+డిపెండెన్సీలను ఇన్‌స్టాల్ చేయండి:
+
+npm install
+
+ఎన్విరాన్మెంట్ సెటప్
+
+ఈ ప్రాజెక్ట్ సరిగ్గా పనిచేయడానికి API కీలు అవసరం.
+
+ఎన్విరాన్మెంట్ ఫైల్‌ను సృష్టించండి:
+
+treasure-hunt రూట్ డైరెక్టరీలో (package.json ఉన్న అదే ఫోల్డర్‌లో) కొత్త ఫైల్‌ను సృష్టించండి మరియు దానికి .env అని పేరు పెట్టండి.
+
+API కీలను జోడించండి:
+
+.env ఫైల్‌ను తెరిచి మీ Pixabay API కీని జోడించండి. మీరు Pixabay వెబ్‌సైట్ నుండి ఉచిత కీని పొందవచ్చు.
+
+VITE_PIXABAY_API_KEY="YOUR_API_KEY_HERE"
+
+గమనిక: MapTiler API కీ ఈ వెర్షన్ కోసం సోర్స్ కోడ్‌లో ఇప్పటికే చేర్చబడింది.
+
+అప్లికేషన్‌ను రన్ చేయడం
+
+డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభించండి:
+
+npm run dev
+
+ఈ కమాండ్ Vite డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభిస్తుంది.
+
+బ్రౌజర్‌లో వీక్షించండి:
+
+మీ బ్రౌజర్‌ను తెరిచి మీ టెర్మినల్‌లో చూపిన లోకల్ URL కు నావిగేట్ చేయండి (సాధారణంగా http://localhost:5173).
+
+లోకల్ నెట్‌వర్క్‌లో పరీక్షించడం
+
+మీ అదే నెట్‌వర్క్‌లోని ఇతర పరికరాలలో (మొబైల్ ఫోన్ వంటివి) అప్లికేషన్‌ను పరీక్షించడానికి:
+
+1. మీ ల్యాప్‌టాప్ మరియు మొబైల్ పరికరం ఒకే Wi-Fi నెట్‌వర్క్ లేదా మొబైల్ హాట్‌స్పాట్‌కు కనెక్ట్ చేయబడి ఉన్నాయని నిర్ధారించుకోండి.
+2. vite.config.js ఫైల్ నెట్‌వర్క్ యాక్సెస్‌ను అనుమతించడానికి host: true తో ఇప్పటికే కాన్ఫిగర్ చేయబడింది.
+3. మీరు npm run dev రన్ చేసినప్పుడు, టెర్మినల్ "నెట్‌వర్క్" URL ను ప్రదర్శిస్తుంది (ఉదా: http://192.168.1.10:5173).
+4. గేమ్ ఆడటానికి మీ మొబైల్ పరికర బ్రౌజర్‌లో ఈ నెట్‌వర్క్ URL ను తెరవండి.
+
+https://drive.google.com/file/d/14HOmRYkzUIVHBRBOjPe1EO72YScDhM6i/view